Caching w webie - przegladarka, serwer, nagłówki

Pierwszy request:
[Przegladarka] --GET /style.css--> [Serwer]
[Przegladarka] <--200 + plik + Cache-Control-- [Serwer]

Kolejny request (cache hit):
[Przegladarka] --> sprawdza lokalny cache --> plik jest świeży
[Przegladarka] --> używa lokalnej kopii (brak requestu do serwera!)

Kolejny request (cache miss / stałe):
[Przegladarka] --> sprawdza cache --> plik wygasł
[Przegladarka] --GET /style.css + If-None-Match--> [Serwer]
[Przegladarka] <--304 Not Modified-- [Serwer] (użyj lokalnej kopii)

CACHE HIT (szybko):
[User] --> [Browser Cache] --> [Strona wyświetlona]
           (plik lokalnie)     Czas: ~10ms

CACHE MISS (wolno):
[User] --> [Browser Cache] --> [Serwer] --> [Strona wyświetlona]
           (brak pliku)        (pobierz)    Czas: ~500ms

+------------------+
|   Przegladarka   |  <-- Najszybszy (lokalnie)
+------------------+
         |
         v
+------------------+
|       CDN        |  <-- Szybki (blisko usera)
+------------------+
         |
         v
+------------------+
|  Cache serwera   |  <-- Sredni (Redis/Memcached)
+------------------+
         |
         v
+------------------+
|  Baza danych     |  <-- Najwolniejszy
+------------------+

+------------------------+-------------------+
| Typ zasobu             | Cache-Control     |
+------------------------+-------------------+
| HTML (dynamiczny)      | no-cache          |
| CSS/JS (z hashem)      | max-age=31536000  |
| Obrazy statyczne       | max-age=86400     |
| API responses          | no-store / private|
| Publiczne dane         | public, max-age=N |
+------------------------+-------------------+

<?php
// Dla statycznych zasobow - długi cache
header('Cache-Control: public, max-age=31536000'); // 1 rok

// Dla dynamicznych stron - bez cache
header('Cache-Control: no-cache, no-store, must-revalidate');

// Dla danych API - krótki cache
header('Cache-Control: private, max-age=60'); // 1 minuta

<?php
$content = file_get_contents('data.json');
$etag = md5($content);

// Sprawdz czy klient ma aktualna wersje
if (isset($_SERVER['HTTP_IF_NONE_MATCH']) &&
    $_SERVER['HTTP_IF_NONE_MATCH'] === '"' . $etag . '"') {
    header('HTTP/1.1 304 Not Modified');
    exit;
}

// Wyslij z ETag
header('ETag: "' . $etag . '"');
header('Cache-Control: no-cache');
echo $content;

<!-- ZLE - plik może być cache'owany zbyt długo -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/app.js"></script>

<!-- DOBRZE - wersja w nazwie pliku -->
<link rel="stylesheet" href="/css/style.v2.css">
<script src="/js/app.v2.js"></script>

<!-- DOBRZE - hash w query string -->
<link rel="stylesheet" href="/css/style.css?v=abc123">
<script src="/js/app.js?v=abc123"></script>

<!-- NAJLEPIEJ - hash w nazwie (webpack/vite) -->
<link rel="stylesheet" href="/css/style.abc123.css">
<script src="/js/app.abc123.js"></script>

# Cache dla plikow statycznych
<IfModule mod_expires.c>
    ExpiresActive On

    # Obrazy - 1 miesiac
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"

    # CSS/JS - 1 rok (z wersjonowaniem!)
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"

    # HTML - bez cache
    ExpiresByType text/html "access plus 0 seconds"
</IfModule>

1. Otworz DevTools (F12)
2. Przejdz do zakładki Network
3. Załaduj strone
4. Sprawdz kolumne "Size":
   - "(from disk cache)" = cache hit
   - "(from memory cache)" = cache hit (RAM)
   - rozmiar w KB = cache miss

5. Sprawdz nagłówki odpowiedzi:
   - Response Headers > Cache-Control
   - Response Headers > ETag