Almacenamiento en la memoria caché de contenido estático y dinámico: ¿cómo funciona?

El contenido dinámico, a diferencia del estático, es diferente para cada usuario, de ahí que no se pueda entregar a varios usuarios y sea difícil de almacenar en caché, aunque no imposible con el uso de la tecnología adecuada.

Objetivos de aprendizaje

Después de leer este artículo podrás:

  • Diferenciar los contenidos estáticos de los dinámicos
  • Descubrir por qué es difícil almacenar en caché el contenido dinámico y cómo la nueva tecnología permite hacerlo
  • Entender la diferencia entre el almacenamiento en caché y la compresión del contenido dinámico
  • Conocer cómo las etiquetas ESI (Edge Side Includes) permiten almacenar en caché el contenido estático de una página web dinámica

Contenido relacionado


¿Quieres saber más?

Suscríbase a theNET, el resumen mensual de Cloudflare sobre las ideas más populares de Internet.

Revisa la política de privacidad de Cloudflare para saber más sobre cómo Cloudflare gestiona tus datos personales.

Copiar enlace del artículo

¿En qué se diferencian el contenido estático y dinámico?

El contenido estático es cualquier archivo que se almacena en un servidor y es el mismo cada vez que se entrega a los usuarios. Los archivos HTML y las imágenes son ejemplos de este tipo de contenido. El contenido estático es como un periódico, una vez que se publica una edición, los artículos y las fotos son iguales en cada ejemplar durante todo el día, sin importar las novedades que se produzcan en la jornada.

Los contenidos dinámicos son aquellos que cambian en función de factores específicos del usuario, como la hora de la visita, la ubicación y el dispositivo. Una página web dinámica no tendrá el mismo aspecto para todo el mundo, sino que puede cambiar a medida que los usuarios interactúan con ella, como si un periódico pudiera reescribirse mientras alguien lo está leyendo. Esto hace que las páginas web sean más personalizadas e interactivas.

Página web estática Página web dinámica

Un sitio web de noticias moderno es un buen ejemplo de contenido dinámico. A diferencia de un periódico, los artículos se actualizan a lo largo del día y la página de inicio puede incluir diferentes titulares según la ubicación o el estado de inicio de sesión del visitante del sitio. Las páginas de redes sociales son otro ejemplo. La actualización de noticias de Facebook tiene un aspecto totalmente diferente para cada usuario, y los usuarios pueden interactuar con el contenido para cambiarlo (dándole me gusta, compartiendo o comentando publicaciones).

Las páginas web dinámicas no se almacenan como archivos HTML estáticos. En su lugar, el script que se ejecuta en el servidor genera un archivo HTML en respuesta a eventos, como interacciones de usuario o inicios de sesión de usuario, y envían el archivo HTML al navegador web. Debido a que el contenido dinámico se genera en el servidor, generalmente se entrega desde servidores de origen, no desde una memoria caché.

Durante mucho tiempo, se consideró que el contenido dinámico no podía almacenarse en caché. Sin embargo, las nuevas tecnologías permiten a los sitios web ofrecer contenido dinámico desde una memoria caché, lo que reduce significativamente la latencia al tiempo que la experiencia del usuario sigue siendo interactiva.

¿Cómo se almacena en caché el contenido estático?

El proceso habitual de almacenamiento en la memoria caché es que una caché almacena una copia del archivo estático (por ejemplo, una imagen) cuando se entrega el contenido, de modo que está más cerca del usuario y se entrega más rápidamente la próxima vez. Los navegadores y las redes de entrega de contenido (CDN) pueden almacenar en la memoria caché contenido estático durante un periodo de tiempo determinado y entregarlo a los usuarios siempre y cuando el contenido siga siendo solicitado. Esto es posible porque el contenido estático no cambia con el tiempo. El mismo archivo se puede entregar a los usuarios repetidas veces.

¿Cómo funciona el almacenamiento en caché del contenido dinámico?

El contenido dinámico se genera mediante scripts que cambian el contenido de una página. Al ejecutar scripts en una caché de CDN en lugar de en un servidor de origen lejano, se puede generar y entregar contenido dinámico desde una caché. Por lo tanto, el contenido dinámico está básicamente "almacenado en caché" y no tiene que ser entregado desde el origen, lo que reduce el tiempo de respuesta a las solicitudes de los clientes y acelera las páginas web dinámicas.

Cloudflare Workers, por ejemplo, es una plataforma de funciones JavaScript sin servidor que se ejecutan en la CDN de Cloudflare. Pueden responder a una variedad de eventos y entradas, incluidos el tipo de dispositivo, la hora del día, la ubicación del usuario o los datos de la API de terceros. En función de estos parámetros, el contenido dinámico se puede generar y distribuir en los dispositivos del cliente, o el contenido estático se puede alterar, almacenar o purgar de la caché.

Debido a que Cloudflare Workers es código JavaScript, los desarrolladores pueden usarlo para crear una amplia gama de funciones o una aplicación completa, además de almacenar en caché el contenido dinámico. Por otra parte, Cloudflare Workers puede desplegarse y propagarse a ubicaciones de CDN de todo el mundo en cuestión de segundos.

Se ejecuta en un entorno de ejecución ligero para acelerar y ejecutar el código en milisegundos. Permite a los desarrolladores ejecutar código sin preocuparse por configurar un backend. Más información sobre a computación sin servidor.

¿Cuál es la diferencia entre el almacenamiento en caché y la compresión de contenido dinámico?

Otro enfoque para acelerar las páginas web dinámicas es comprimir el contenido dinámico generado por el servidor de origen y entregarlo de la forma más rápida y eficiente posible. Con la compresión dinámica, el contenido sigue procediendo del servidor de origen en lugar de la memoria caché, pero el tamaño de los archivos HTML generados se reduce significativamente para que puedan llegar al dispositivo del cliente de forma más ágil.

¿Cómo Edge Side Includes (ESI) acelera las páginas web dinámicas?

A menudo, gran parte del contenido en una página web dinámica sigue siendo consistente para todos los usuarios, y solo ciertos elementos en la página son dinámicos. Esto significa que gran parte del código HTML se duplica en cada copia dinámica de la página. Para solucionar esta ineficiencia, varias empresas colaboraron en el desarrollo de Edge Side Includes (ESI), un lenguaje de marcado que especifica dónde aparece el contenido dinámico en una página web. (ESI está en uso en algunas CDN, pero aún no es aceptado por el W3C, el consorcio que rige los estándares web).

El contenido con una etiqueta ESI se obtiene de otro lugar, mientras que el resto del contenido de la página web se puede almacenar en la memoria caché. Si solo parte de la página web se genera de forma dinámico y el resto se almacena en caché, la página web se cargará mucho más rápido que si hay que generar toda la página para cada usuario. ESI puede combinarse con Cloudflare Workers para mejorar aún más la eficacia del proceso.