Caché en Nginx: Diferencias Entre la Caché de Proxy Inverso y la Caché del Navegador

1. Caché del Proxy Inverso (Nginx)

Cuando configuramos cosas como proxy_cache, proxy_cache_bypass, proxy_cache_use_stale, proxy_cache_valid, estamos hablando de la caché gestionada por Nginx.

• Propósito: Nginx almacena respuestas del servidor backend en la caché para evitar tener que hacer la misma solicitud al backend cada vez. Esto reduce la carga en el servidor y mejora el rendimiento al servir contenido ya almacenado en caché.
• Directivas relevantes:
  • proxy_cache: Define la zona de caché en Nginx.
  • proxy_cache_bypass: Controla si Nginx debe o no usar la caché para una solicitud determinada.
  • proxy_cache_valid: Define cuánto tiempo un tipo de respuesta debe permanecer en caché.
  • add_header WP-Proxy-Cache $upstream_cache_status: Añade encabezados que indican si una respuesta fue servida desde la caché o si se generó dinámicamente.
  • add_header Cache-BYPASS-Reason $skip_reason: Añade un encabezado que describe la razón de la omisión de la caché (por ejemplo, si el usuario está autenticado o si se trata de un recurso dinámico).

2. Caché del Navegador

La caché del navegador es independiente de la caché del proxy inverso. Es gestionada por el cliente (el navegador web) y se utiliza para almacenar recursos (imágenes, hojas de estilo, scripts, etc.) localmente en el dispositivo del usuario, con el objetivo de reducir el tiempo de carga en visitas subsecuentes.

• Propósito: Reducir las solicitudes al servidor, mejorando la experiencia del usuario y optimizando la carga de los recursos.
• Controlada mediante encabezados HTTP:
  • Cache-Control: Este encabezado le indica al navegador cómo manejar la caché, por ejemplo:
    • Cache-Control: no-cache: No almacenes en caché.
    • Cache-Control: max-age=3600: Mantén el recurso en caché durante 1 hora.
    • Cache-Control: public: El recurso puede ser cacheado por cualquier persona.
  • Expires: Define una fecha/tiempo en la que el recurso expira.
  • ETag: Indica si el recurso ha cambiado y si es necesario volver a descargarlo.
  • Last-Modified: Similar a ETag, le dice al navegador si el recurso ha cambiado desde la última vez.
• Directivas relevantes en Nginx para controlar la caché del navegador:
  • expires: Define cuánto tiempo los archivos deben ser almacenados en la caché del navegador.
    
    location ~* \.(jpg|jpeg|png|gif|css|js|woff|woff2|ttf|eot|otf|svg)$ { expires 30d; # Los archivos estáticos se mantienen en caché por 30 días.
}
    
  • add_header Cache-Control: Asegura que los archivos estáticos tengan el encabezado adecuado para la caché del navegador.
    
    location ~* \.(css|js|jpg|jpeg|png|gif)$ {
add_header Cache-Control "public, max-age=31536000"; # 1 año de caché
}

Interacción entre las dos cachés

• Caché del Proxy Inverso (Nginx): Se utiliza para almacenar respuestas a nivel de servidor. Si el recurso no está en caché, Nginx lo solicita al servidor de origen (backend).
  • Ejemplo: Si un usuario visita una página de producto en tu tienda en línea, Nginx puede almacenar en caché la respuesta (la página renderizada) durante un período de tiempo determinado para evitar que cada usuario haga una solicitud al servidor de origen.
• Caché del Navegador: Almacena los archivos estáticos en el dispositivo del usuario (como imágenes, CSS, JavaScript), lo que evita que el navegador descargue estos recursos cada vez que el usuario recarga la página.

¿Cómo interactúan?

• Cuando un recurso se encuentra en la caché del proxy inverso, Nginx lo servirá directamente al cliente sin pedirlo al servidor de origen, mejorando la velocidad de carga.
• Si Nginx sirve el recurso desde la caché, el navegador también puede guardar en su propia caché la respuesta que recibe. Por ejemplo, si una imagen es servida desde la caché del proxy, el navegador podría mantenerla en su propia caché para que no tenga que pedirla nuevamente en la próxima visita.
• Si Nginx no sirve un recurso desde la caché (por ejemplo, si el recurso ha expirado o nunca fue almacenado), Nginx realizará una solicitud al backend, que luego devolverá la respuesta al navegador. El navegador puede entonces almacenar esa respuesta en su propia caché si los encabezados Cache-Control lo permiten.

Resumen de las configuraciones:

• Las configuraciones que hemos hablado (como proxy_cache, proxy_cache_bypass, etc.) son para la caché del proxy inverso (Nginx).
• La caché del navegador se controla principalmente con los encabezados Cache-Control, Expires, y otros, configurados en Nginx para los archivos estáticos.
• Ambas cachés trabajan juntas, pero gestionan diferentes aspectos del flujo de datos: Nginx maneja la caché a nivel de servidor, mientras que el navegador gestiona la caché a nivel del cliente.