Almacenamiento en caché de contenido dinámico y estático | ¿Como funciona?

A diferencia del contenido estático, el contenido dinámico es diferente para cada usuario, lo que significa que no se puede atender a múltiples usuarios y es difícil de almacenar en caché. Sin embargo, almacenar en caché el contenido dinámico es posible con la tecnología adecuada.

Metas de aprendizaje

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

  • Diferenciar el contenido estático frente al contenido dinámico
  • Descubre por qué el contenido dinámico es difícil de almacenar en caché y cómo la nueva tecnología permite almacenar en caché el contenido dinámico
  • Comprende la diferencia entre el almacenamiento en caché del contenido dinámico y la compresión de contenido dinámico
  • Descubrir cómo las etiquetas de Edge Side Includes permiten almacenar en caché partes estáticas de una página web dinámica

Contenido relacionado


¿Quieres saber más?

Suscríbete 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 el enlace del artículo

¿Cuál es la diferencia entre el contenido estático y dinámico?

El contenido estático es cualquier archivo que se almacena en un servidor y que es el mismo cada vez que se entrega a los usuarios. Los archivos HTML e imágenes son ejemplos de este tipo de contenido. El contenido estático es como un periódico: una vez que se publica un número de un periódico, presenta los mismos artículos y fotos todo el día para todos los que toman una copia, sin importar las novedades que sucedan durante el día.

El contenido dinámico es contenido que cambia en función de los factores específicos del usuario, como la hora de la visita, la ubicación y el dispositivo. Una página web dinámica no será la misma para todos y puede cambiar a medida que los usuarios interactúan con ella – como si un periódico pudiera reescribirse a sí mismo mientras alguien lo está leyendo. Esto hace que las páginas web sean más personalizadas y más 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 presentar diferentes titulares según la ubicación del visitante del sitio o estado del inicio de sesión. Las páginas de redes sociales son otro ejemplo: la sección de noticias de Facebook tiene un aspecto totalmente diferente para cada usuario y los usuarios pueden interactuar con el contenido para cambiarla (dándole me gusta, compartiendo o comentando publicaciones).

Las páginas web dinámicas no se guardan como archivos HTML estáticos. En cambio, los scripts del lado del servidor generan un archivo HTML en respuesta a eventos, como interacciones o inicios de sesión del usuario y envían el archivo HTML al navegador web. Debido a que el contenido dinámico se genera en el lado del servidor, generalmente se sirve desde servidores de origen, no desde una caché.

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

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

El proceso habitual de almacenamiento en caché web es que una caché guarde una copia del archivo estático –por ejemplo, una imagen– cuando se sirve el contenido, de modo que esté más cerca del usuario y se entregue más rápidamente la próxima vez. Los navegadores y las redes de entrega de contenido (CDN) pueden guardar en caché el contenido estático durante un período de tiempo determinado y servirlo a los usuarios siempre que se continúe solicitando el contenido. Esto es posible porque el contenido estático no cambia con el tiempo. El mismo archivo se puede entregar a los usuarios una y otra vez.

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

El contenido dinámico se genera a través de scripts que cambian el contenido de una página. Al ejecutar scripts en una caché de CDN en lugar de hacerlo en un servidor de origen distante, se puede generar y entregar contenido dinámico desde una caché. Por lo tanto, el contenido dinámico está principalmente "almacenado en caché" y no tiene que ser servido 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, son funciones de 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 API de terceros. En función de estos parámetros, el contenido dinámico se puede generar y distribuir en los dispositivos cliente o el contenido estático se puede alterar, almacenar en caché o purgar de la caché.

Debido a que Cloudflare Workers son código JavaScript, los desarrolladores pueden usarlos para crear una amplia gama de funciones o una aplicación completa, además de almacenar en caché contenido dinámico. Además, Cloudflare Workers se puede implementar y propagar a ubicaciones de CDN en todo el mundo en segundos.

Los Cloudflare Workers se ejecutan en un entorno de ejecución ligero para que el código pueda girar y ejecutarse en milisegundos. Permiten a los desarrolladores ejecutar el código sin preocuparse por configurar un backend. Obtén más información sobre la informática sin servidor.

¿Cuál es la diferencia entre el almacenamiento en caché del contenido dinámico 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 manera más rápida y eficiente posible. Con la compresión dinámica, el contenido aún proviene del servidor de origen en lugar de un caché, pero los archivos HTML generados se hacen significativamente más pequeños para que puedan llegar al dispositivo del cliente más rápido.

¿Cómo el uso de Edge Side Incluye (ESI) acelera las páginas web dinámicas?

A menudo, una gran cantidad de contenido en una página web dinámica sigue siendo constante para todos los usuarios y solo ciertos elementos de la página son dinámicos. Esto quiere decir que gran parte del código HTML se duplica en cada copia dinámica de la página. Para solucionar esta ineficiencia, varias empresas trabajaron en conjunto para desarrollar Edge Side Incluye (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, la organización que rige los estándares web).

El contenido con una etiqueta ESI se obtiene de otro lugar, mientras que el resto de contenido de la página web se puede almacenar en caché. Si solo una parte de la página web se genera dinámicamente y el resto se almacena en caché, la página web se cargará mucho más rápido que cuando es necesario generar la página completa para cada usuario. ESI se puede combinar con Cloudflare Workers para hacer que el proceso sea más eficiente.