Configura el comportamiento del almacenamiento en caché de HTTP

Jeff Posnick

En este codelab, se muestra cómo cambiar los encabezados de almacenamiento en caché HTTP que muestra un servidor web basado en Node.js mediante el framework de entrega de Express. También mostrará cómo confirmar que el comportamiento de almacenamiento en caché que esperas se aplique realmente, con el panel Network de las Herramientas para desarrolladores de Chrome.

Familiarízate con el proyecto de muestra

Estos son los archivos clave con los que trabajarás en el proyecto de muestra:

  • server.js incluye el código de Node.js que entrega el contenido de la app web. Utiliza Express para controlar las solicitudes y respuestas HTTP. En particular, express.static() se usa para entregar todos los archivos locales del directorio público, por lo que la documentación de serve-static será útil.
  • public/index.html es el código HTML de la aplicación web. Al igual que la mayoría de los archivos HTML, no contiene información sobre el control de versiones como parte de su URL.
  • public/app.15261a07.js y public/style.391484cf.css son los recursos de JavaScript y CSS de la aplicación web. Cada uno de estos archivos contiene un hash en sus URLs, que corresponde a su contenido. index.html se encarga de hacer un seguimiento de la URL con versión específica que se debe cargar.

Configurar los encabezados de almacenamiento en caché para nuestro HTML

Cuando respondas solicitudes de URLs que no contengan información sobre el control de versiones, asegúrate de agregar Cache-Control: no-cache a tus mensajes de respuesta. Además, se recomienda configurar uno de dos encabezados de respuesta adicionales: Last-Modified o ETag. El index.html entra en esta categoría. Puedes dividirlo en dos pasos.

Primero, los encabezados Last-Modified y ETag se controlan mediante las opciones de configuración etag y lastModified. Ambas opciones se establecen de forma predeterminada como true para todas las respuestas HTTP, por lo que, en esta configuración actual, no tienes que habilitar ese comportamiento. De todos modos, puedes ser explícito en la configuración.

En segundo lugar, debes poder agregar el encabezado Cache-Control: no-cache, pero solo para tus documentos HTML (en este caso, index.html). La forma más fácil de configurar este encabezado de manera condicional es escribir un setHeaders function personalizado y, dentro de este, verificar si la solicitud entrante es para un documento HTML.

  • Haz clic en Remix to Edit para que el proyecto sea editable.

La configuración de entrega estática en server.js comienza de la siguiente manera:

app.use(express.static('public'));
  • Realiza los cambios descritos anteriormente y deberías obtener algo similar a lo siguiente:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Configura encabezados de almacenamiento en caché para las URLs con versiones

Cuando respondas solicitudes de URLs que contengan información de "huella digital" o control de versiones, y cuyo contenido nunca vaya a cambiar, agrega Cache-Control: max-age=31536000 a tus respuestas. app.15261a07.js y style.391484cf.css corresponden a esta categoría.

A partir del setHeaders function que se usó en el último paso, puedes agregar lógica adicional para verificar si una solicitud determinada corresponde a una URL con versión y, de ser así, agregar el encabezado Cache-Control: max-age=31536000.

La manera más sólida de hacerlo es usar una expresión regular para ver si el recurso que se solicita coincide con un patrón específico en el que sabes que se encuentran los hash. En el caso de este proyecto de muestra, siempre son ocho caracteres del conjunto de dígitos del 0 al 9 y de las letras minúsculas a la f (es decir, caracteres hexadecimales). El hash siempre está separado por un carácter . a cada lado.

Una expresión regular que coincide con esas reglas generales se puede expresar como new RegExp('\\.[0-9a-f]{8}\\.').

  • Modifica la función setHeaders para que se vea de la siguiente manera:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Confirme el nuevo comportamiento con las Herramientas para desarrolladores

Una vez implementadas las modificaciones en el servidor de archivos estáticos, puedes verificar que se establezcan los encabezados correctos. Para ello, obtén una vista previa de la app activa con el panel Network de Herramientas para desarrolladores abierto.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.

  • Haz clic con el botón derecho en el encabezado de la columna para personalizar las columnas que se muestran en el panel Red a fin de incluir la información más relevante:

Cómo configurar el panel de red de Herramientas para desarrolladores

Aquí, las columnas a las que debes prestar atención son Name, Status, Cache-Control, ETag y Last-Modified.

  • Con las Herramientas para desarrolladores abierto en el panel Network, actualiza la página.

Una vez cargada la página, deberías ver entradas en el panel Network que se ven de la siguiente manera:

Columnas del panel de red.

La primera fila es para el documento HTML al que navegaste. Esto se entrega correctamente con Cache-Control: no-cache. El estado de la respuesta HTTP para esa solicitud es 304. Esto significa que el navegador no sabía usar el HTML almacenado en caché de inmediato, sino que realizaba una solicitud HTTP al servidor web con la información Last-Modified y ETag para ver si había alguna actualización en el código HTML que ya tenía en su caché. La respuesta HTTP 304 indica que no hay HTML actualizado.

Las siguientes dos filas corresponden a los recursos de JavaScript y CSS con control de versiones. Deberías ver que se entregan con Cache-Control: max-age=31536000, y el estado HTTP de cada uno es 200. Debido a la configuración que se usó, no se realiza ninguna solicitud real al servidor Node.js y, si haces clic en la entrada, se mostrarán detalles adicionales, incluido que la respuesta provino “(de la caché del disco)”.

Un estado de respuesta de red de 200.

Los valores reales de las columnas ETag y Last-Modified no son muy importantes. Lo importante es confirmar que se están configurando.

En resumen

Después de seguir los pasos de este codelab, ahora sabes cómo configurar los encabezados de respuesta HTTP en un servidor web basado en Node.js mediante Express, para un uso óptimo de la caché HTTP. También tienes los pasos necesarios para confirmar que se esté usando el comportamiento esperado de almacenamiento en caché a través del panel Network de Herramientas para desarrolladores de Chrome.