Los CDNs NO SIRVEN..
Summary
TLDRThe script explores the challenges of using CDNs for dynamic websites, focusing on cache consistency and performance issues. It discusses how CDNs work well for static content, but struggle with dynamic sites that frequently update data, like e-commerce or real-time applications. The developer's attempts to manage cache, including using headers and client-side JavaScript, often lead to poor user experience and SEO performance. It highlights modern solutions like partial prerendering and server-side islands, which combine static and dynamic elements, offering better performance for dynamic sites in today's web environment.
Takeaways
- 😕 CDN is not effective for dynamic sites because cache management becomes inconsistent.
- 🚫 CDN cache control makes it hard to ensure data consistency, leading to slow cache clearing.
- 🧑💻 Developers try to manage CDN caching with headers like 'vary', but this still results in static behavior for dynamic data.
- 🌀 Using JavaScript to solve client-side issues often leads to slower page loads, layout shifts, and performance problems.
- 🚩 Dynamic sites, such as e-commerce or real-time apps like Airbnb, can't be easily cached with CDN due to constant data updates.
- ⚙️ Modern approaches like streaming and granular caching, rather than caching the entire page, are seen as better solutions.
- 🌐 Static sites or sites with little dynamic content can benefit from CDNs, making them faster and cheaper to serve.
- 💡 A hybrid approach (combining static and dynamic rendering) is becoming popular in frameworks like Next.js and Astro.
- 📊 Revalidating static content when needed and dynamically serving user-specific data (e.g., carts, recommendations) is essential for balancing performance and freshness.
- 🔥 CDNs can work, but the challenge lies in handling complex, dynamic elements in real-time applications, requiring smarter caching strategies.
Q & A
Why do CDNs not work well for dynamic sites?
-CDNs are optimized for delivering static content by caching and distributing it globally. However, when a site is dynamic, with frequent data changes or user-specific content, CDNs struggle to maintain consistency. Developers may need to constantly clear the cache, leading to delays and inconsistencies.
What issues arise when developers use CDNs with dynamic content?
-Developers often face cache invalidation problems, where users might see outdated data. Clearing the cache is slow and unreliable, which can cause users to receive inconsistent data, especially if they need real-time information like updates to their own actions or writings.
What is the role of cache control, and why is it problematic for dynamic content?
-Cache control helps manage how content is cached and updated across CDNs. For dynamic content, cache control can become a burden because it forces developers to manually clean or refresh the cache, which is inefficient and may lead to inconsistent data being served to users.
How does moving dynamic rendering to the client affect performance?
-Shifting rendering to the client can lead to performance degradation, causing issues like layout shifts, increased loading times (with spinners), and poor web vitals. This negatively impacts both user experience and SEO, as the site becomes slower and less responsive.
What is 'streaming' and 'granular caching,' and how do they help solve CDN-related problems?
-Streaming and granular caching involve sending only the necessary dynamic parts of a page to the client while keeping the static parts cached. This hybrid approach allows dynamic content to be updated more efficiently without having to clear the entire cache, thus improving both performance and consistency.
Why is ESI (Edge Side Includes) mentioned, and how does it work in this context?
-ESI is a technique that allows dynamic content to be embedded within otherwise static pages, enabling more granular cache control. It helps solve the problem of mixing static and dynamic content by allowing different cache rules for different parts of the page.
Why do CDNs work well for static sites but struggle with dynamic ones?
-CDNs excel at distributing static content, such as blog posts or marketing pages, because this content rarely changes. However, for dynamic sites, like e-commerce platforms or real-time applications, frequent data updates make caching much more complex and difficult to manage.
What are 'server islands' or 'partial prerendering,' and how do they benefit dynamic sites?
-Server islands and partial prerendering refer to strategies where only certain parts of a page are rendered dynamically while the rest is served statically. This allows developers to balance the performance benefits of static caching with the need for real-time updates for dynamic content.
How does Next.js's 'partial prerendering' feature address the challenges of dynamic content?
-Next.js's partial prerendering allows developers to mix static and dynamic content within the same page. Static sections of a page can be cached and served quickly, while dynamic parts (e.g., user-specific data) can be rendered on demand, improving both performance and user experience.
Why is the 'static versus dynamic' debate significant for developers today?
-As more websites incorporate dynamic features like personalized content or real-time updates, developers need to find the right balance between static and dynamic rendering. This debate is crucial because it impacts site performance, scalability, and the overall user experience.
Outlines
⚙️ Why CDNs Struggle with Dynamic Sites
This paragraph explains why CDNs (Content Delivery Networks) do not work well with dynamic sites. The site in question uses server-side rendering and a database, and while developers try to implement caching and CDNs, dynamic content causes issues. Clearing the cache becomes slow and unreliable, leading to inconsistent data. Developers attempt various workarounds, like using JavaScript on the client side, but this results in slower sites with layout shifts and performance issues. The solution is granular caching and streaming rather than caching the entire page, which maintains data consistency and performance.
📊 Static vs Dynamic Content in Business Applications
Here, the focus shifts to how static content is useful for some websites but falls short for business sites like e-commerce platforms (e.g., Airbnb). Static sites can be cached easily, but dynamic data, such as user reviews or product updates, requires constant revalidation. Developers must strike a balance between caching static parts and dynamically rendering others, like product recommendations. The paragraph highlights how dynamic content complicates the caching process and points to the importance of finding hybrid solutions that mix static and dynamic rendering.
🌐 CDN Limitations in Highly Dynamic Webpages
This section elaborates on the limitations of CDNs in handling highly dynamic websites like online stores or real estate platforms. It explains that caching dynamic content like real-time search results or price updates is impractical, as the data frequently changes. Developers must revalidate too often, defeating the purpose of caching. The paragraph emphasizes that CDNs are not a one-size-fits-all solution, especially for pages with mixed dynamic and static elements. It concludes by supporting newer approaches like server islands or hybrid static and server-side rendering to optimize performance and reduce client-side issues.
Mindmap
Keywords
💡CDN (Content Delivery Network)
💡Dynamic Content
💡Cache
💡Cache Invalidation
💡JavaScript Rendering
💡SSR (Server-Side Rendering)
💡Consistency
💡Partial Prerendering
💡Streaming
💡Web Vitals
Highlights
CDNs struggle with dynamic sites, as they rely on static content caching, making it difficult to ensure data consistency when the site's data changes frequently.
Developers often add a CDN to improve global scaling and speed, but cache control becomes a challenge when data frequently changes.
Cleaning the cache is a slow and unreliable process, leading to inconsistent data when users interact with outdated content.
When developers shift dynamic behavior to the client-side using JavaScript, it can lead to performance issues like layout shifts, slower page loads, and a poor user experience.
Cache control can result in losing the ability to reason about data consistency, causing a shift of dynamic processing to the client, which can hurt performance and SEO.
Streaming and granular caching are proposed as solutions to balance dynamic content needs and performance, but they require careful implementation.
While CDNs work well for static sites or content, they struggle with dynamic content like user-specific data, which needs real-time updates and cannot be effectively cached.
For dynamic websites like e-commerce platforms or news sites, a pure CDN approach isn't feasible due to the frequent changes in data like product availability or news updates.
Hybrid models like partial prerendering or server islands offer a middle ground where parts of a site can be static, while dynamic content is rendered on the server.
In modern web development, it's increasingly common to mix static and dynamic content to optimize performance while ensuring real-time updates where necessary.
Astro’s server islands and Next.js’s partial prerendering are highlighted as emerging solutions that effectively blend static and dynamic rendering for modern web applications.
Developers need to balance static and dynamic content to achieve optimal site performance, ensuring that only the components that need to be dynamic are updated in real-time.
Many current frameworks are moving towards hybrid models that allow developers to define which parts of the page should be static and which should be dynamic, improving flexibility.
Dynamic features like personalized content or shopping carts must be handled differently, often requiring real-time server rendering to avoid user experience issues.
While CDNs are effective for static content, they are insufficient for highly dynamic sites where data consistency and real-time updates are critical.
The discussion highlights that the future of web development lies in hybrid solutions, combining the efficiency of CDNs with dynamic server-rendered content for optimal performance.
Transcripts
Por qué los cdns realmente no funcionan
el sitio es Dinámico el sitio utiliza
servers al rendering y una base de datos
el sitio necesito necesita escala global
y velocidad el desarrollador añade cdn
en el frontal desarrollador pone cach
control ahora el sitio es estático sí e
los datos cambian normalmente el
desarrollador empieza a limpiar la cache
de cdn limpiar la cach es lento y no es
fiable el usuario se pone a viajar en el
tiempo y la Data es inconsistente el
usuario no puede leer sus propias
escrituras el desarrollador no puede
observar o debugar la cach el
desarrollador entonces paga por un cdn
Enterprise el desarrollador empieza a
utilizar el header de vari que es el
como que el varía para saber cuándo
tiene que que cambiar el contenido Vale
cuando dices vale pues ha variado el
contenido Pues ahora tienes que servir
un contenido diferente sigue siendo
demasiado estático muy grande la
cardinalidad en el cach Y entonces
empieza a ver un un montón de Miss y ya
no estás utilizando bien la cach no
puedes personalizar o experimentar
necesita el sitio más dinamismo el
desarrollador empieza a enviar
javascript al cliente para arreglarlo
entonces llega a ver todo en el cliente
empieza a renderizar ahí el sitio se
convierte en lento y tiene un montón de
layout shift un montón de spinners
páginas estáticas páginas más lentas y
empieza a fallar todo lo que es el
rendimiento con los web vitals y el seo
se va a la basura en resumen cche
control te hace perder la habilidad de
razonar sobre la consistencia de tus
datos y empieza a cambiar y a mover toda
la carga del dinamismo al cliente hacer
streaming y el cacheo granular en lugar
de toda la página arregla esto y madre
mía la que se ha liado la que se ha
liado con esto bueno tiene aquí 1000
likes pero tiene tiene muchos likes pero
más gente que le ha contestado ya os
digo yo que hay más gente que le ha
contestado que otra cosa En definitiva
que compre mi producto y él dice no solo
quiero que las cosas funcionen mucho
mejor una persona local descubre la
coherencia caché requiere mucho trabajo
duro y se crea ahí sobre el producto no
hay un camino para lograr coherencia en
la caché con caché control aquí lo he
arreglado Por qué los cdns no funcionan
realmente para mí hay mucha gente en las
réplicas dice que señalan que en
realidad el contenido Dinámico no es
para los que sirven la cdn esto tiene
algunos problemas que esto es lo que
está sucediendo en el mundo real en la
práctica las noticias el comercio
electrónico los blogs y los sitios de
marketing están haciendo control de
caché y emparejamiento con javascript
del dado de cliente qué sitio a web hoy
en día no es Dinámico en el momento en
el que agregas un estado de inicio de
sesión o un experimento marca eres
Dinámico y luego dice es que no sé qué
será es no ha funcionado Qué es es H
site includes H site includes vale vale
Ya sé lo que es Eh no ha funcionado en
la práctica debido a que la cdn está
desvinculada del Código de la aplicación
ese No ayudaa ahora os digo lo que es no
hay experiencia de desarrollo local
implementación de vista previa soporte
documentación ejemplos soporte de macros
y tal vale es básicamente es como la
posibilidad de hacer partes de tu página
inyectando contenido Dinámico que está
bastante interesante porque así lo que
puedes hacer ves esto sera el s eh Tú
puedes hacer que todo sea Dinámico Pero
puedes incrustar otra parte que sería
totalmente separada que pueda tener otro
tipo de de Cat control o lo que sea no
así que bueno sería como incrustar que
al final Pues sería algo parecido que es
verdad que el esi puede tener como una
parte de tu web puede tener un cach
control diferente Pero bueno al final
Mira Daniel esto tiene que ser bite la
verdad es que es bastante bastante
bastante polémico lo que ha dicho yo
creo que muchas veces el problema que
hay por aquí el problema que hay de todo
esto es como fijaos que empiezas aquí a
hablar a hablar y mucha gente lo estaba
comentando yo creo que lo que está
hablando Guillermo puede ser que tenga
sentido o sea pero es verdad que está
hablando de un punto muy concreto y muy
pensando quizás en su producto que es
verdad que es el de vercell y en su
producto tiene sentido Pero a ver un cdn
cuando estamos hablando de sitios
estáticos o cuando nosotros nos viene a
la cabeza nuestras páginas web Claro en
nuestras páginas web en nuestros blogs
en nuestras cosas que son muy concretas
seguramente Pues un cdn puede tener todo
el sentido del mundo es es contenido que
no cambia mucho que es bastante estático
que lo único que necesitamos es que se
distribuya y que sea barato y ya está no
pero por ejemplo la web de la velada
Pues en muchos casos puede tener sentido
que sea totalmente estática no es un
contenido que cambia pues esto puede ser
un cdn se puede cachear Hala Ya está no
y luego las páginas que tienen algo
Dinámico Como por ejemplo yo que sé pues
la la del combate Qué tiene de Dinámico
aquí el pronóstico toda la página puede
ser estática pero el pronóstico pues no
pasa nada lo puedes lo puedes cargar en
el cliente no va a dar un salto encima
está debajo del viewport no lo ves No
pasa nada son páginas que tienen todo el
sentido del mundo que sean estáticas
Claro si entramos en el mundo ya más
empresarial por ejemplo un e-commerce
Por ejemplo yo que sé airbnb Claro
airbnb cómo la vas a hacer estática no
tiene sentido no no puedes intentar
hacer en un cdn tener esto porque al
final todos estos resultados de búsqueda
tienen que ir cambiando se tienen que ir
repri zar cuando van cambiando todos los
filtros además no lo puedes cachear
todos no lo puedes generar todo De
antemano sería como demasiado difícil
quizás puedes intentar cachear alguna
cosa Como por ejemplo esta página Pero
qué ocurre cuando esta página la usuaria
chenai no Jan kapur dice ostras voy a
cambiar la descripción Claro si cambia
la descripción si cambias Las
evaluaciones cada cuá tienes que cambiar
o recuperar Las evaluaciones y generar
el cdn al final llega un momento que
estás regenerando Tanto el cdn que es
muy difícil porque quieres que sea
estático pero también te gustaría que de
vez en cuando Las evaluaciones la
valoración todo esto sea Dinámico Cuando
alguien añade una evaluación te gustaría
que apareciese no Entonces quieres
partes dinámicas pero partes estáticas
también y ahí es donde está lo
complicado en este tipo de de páginas
donde hay cosas estáticas pero dinámicas
y tal Ahí es donde yo creo que es donde
está hablando aquí Guillermo Entonces yo
creo que es polémico porque creo que
esto no es verdad o sea creo que los
cdns sí que funcionan creo que sí que
funcionan y funcionan para casos de uso
donde tiene sentido la cdns no pero
entiendo Cuando claro cuando ya el
primer punto es el sitio es Dinámico el
primer punto es el sitio es Dinámico
obviamente no ya es obvio que no te va a
funcionar todo lo de abajo todo lo de
abajo ya no va a funcionar yo creo que
aquí el tema es si la estrategia de
vercel con nexts es la más idónea que yo
creo que puede tener bastante sentido
con el partial prerendering que es estas
cosas que que está haciendo nexs que
tiene bastante buena pinta donde puedes
mezclar por un lado eh partes estáticas
dinámicas a streamear la los datos claro
aquí veis tendríamos parte de que tienes
esta página lo Lila sería estático y lo
que es azul sería Dinámico Y aquí tiene
bastante sentido donde tienes una parte
que es dinámica que se renderiza todavía
en el servidor pero lo que es estático
porque Bueno lo quieres cambiar cada muy
poco tiempo Pues bueno lo puedes hacer
por ejemplo el product information es
muy fácil que cada vez que se hace un
cambio lo pueda regenerar Bueno pues eso
no se va a regenerar no va a estar
cambiando el usuario la información del
producto cada dos por tres puedes hacer
que cada vez que se guarde en base de
datos se regenere la parte estática se
revalide y ya está eso es fácil pero por
ejemplo los productos recomendados que
van a cambiar constantemente y que tiene
que ver con el el comportamiento del
usuario esto no lo puede revalidar No es
tan fácil No pues esto lo pues hacer
Dinámico el carrito también lo quieres
hacer Dinámico Y en lugar de hacerlo en
el cliente que puede ser problemático
porque daría saltos la ui lo podrías
hacer en servidor con este tipo de de
experimento esto cada vez más es una
cosa que se está poniendo muy de moda
porque está demostrad dissimo Yo creo
que es la forma correcta de trabajar con
las webs en pleno 2024 Como por ejemplo
no solo xgs sino que también Astro lo
está haciendo Astro con los server
icelands que es lo que ha ad hace poco
que lo estuvimos comentando en el en el
proyecto que hicimos en el curso de
Astro 5 mid Life en este cursito que
hicimos los server icelands pues lo lo
vimos no el hecho de que toda la página
toda la página es estática
excepto lo que nosotros hacemos y
decimos que sea Dinámico entonces toda
la página es estática excepto la
puntuación porque la puntuación puede
cambiar muy constantemente no tiene
sentido que estemos constantemente
revalidando el cdn o la parte estática y
decimos Oye toda la página es estática
excepto la puntuación que quiero que lo
hagas en el servidor porque el servidor
siempre va a ser mucho más rápido No
quiero que lo parches en el cliente y
teniendo que cargar el el javascript en
el cliente lo haces en el servidor y
simplemente todo lo demás me lo haces
estático y ya está y yo creo que esto es
una cosa que ahí en ese punto sí que
tiene razón pero claro Así dicho en
general me parece como bastante polémico
Porque si Así que creo que en muchos
casos un cdn es suficiente y páginas que
puedan ser totalmente estáticas también
podrían tener todo el sentido del mundo
no O sea creo que hay alguna ves dice un
cdn puedes ser útiles para páginas que
son de server rendering esto lo que dice
medit puede tener sentido Pero imaginaos
una página yo que sé fotocasa que donde
estuve trabajando No en fotocasa al
final si tú estás buscando un piso en
Barcelona capital Cómo vas a cachear los
resultados de búsqueda no tienes sentido
y si se vende este piso y si modifican
el precio de este piso y si este piso lo
retiran porque ya no lo venden Y o sea
es que Hay demasiadas cosas que tú te
pones a cachear y no tendría sentido no
tiene sentido Por más que sea serves a
rendering y que quieres que lo tenga un
buscador al final le podrías estar
enviando información que ya es vieja o
que no quieres que se muestre o tal no O
sea que sí que es verdad que creo que es
complicado el hecho de que si el sitio
es Dinámico utilizas un cdn delante y ya
está Y eso se te soluciona y punto si el
sitio es Dinámico vas a tener que hacer
cosas bastante más complejas que no
decir voy a Pon un cdnn delante y y ya
está para nosotros mortales sí que puede
ser que funcione pero muchas veces para
cosas más complicadas en el mundo real
no va a ser tan fácil periódicos eh
tiendas online no en una tienda online
no puedes poner un cdn y ya está porque
al final El problema es que si el
usuario tiene carrito y tal claro es lo
que dice entonces empiezas a hacerlo en
el
y el problema que te encuentras ahí al
hacerlo todo en el cliente es que
empiezas a parchear un montón de cosas
en el cliente y eso lo ve el usuario y
le afecta la experiencia de usuario no
revalidate on demand es que eso no no es
vedas es el revalidate on demand puede
funcionar para cosas que cambian muy
poco porque para cosas que cambian cada
mucho el revalid deon deman al final
cada dos por TR tienes que revalidar Y
entonces estás haciendo el mismo trabajo
solo que la primera vez a lo mejor no lo
haces pero no paras de revalidar lo y
tal Y aunque Cómo sabes cuando la
información que está mostrando es la
correcta sabes es complicado pero sí es
lo que dice js lacro parecido al
monolito no se puede demonizar todo yo
creo que el mensaje así ha sido polémico
ya lo ha hecho aposta Por qué los cdns
no funcionan a ver los cdn sí que
funcionan totalmente pero funcionan para
páginas que son bastante estáticas si el
sitio es Dinámico pues hombre ahí ya
empiezas a tener un problema y tienes
que buscar otras soluciones qué
soluciones yo creo que partial
prerendering de nexts los server
icelands de Astro son soluciones que te
pueden simplificar mucho la vida y que
te van a ayudar y que ahí es donde yo
creo que está está la idea no eh lo
ideal es dividir la información y
dependiendo de cómo vaya a ser usar ssr
estático cliente Claro pero ese es el
problema que lo quieres todo No quieres
separar la página a que sea server site
o static lo que te gustaría es que en
una misma página tener partes que sean
estáticas y otras que sean server site
Esa es la clave Y eso es lo complicado
el hecho de decidir que la página entera
sea server site eso muy fácil pero el
problema es que no quieres tener eso lo
que quieres es pues como lo de los
server islands lo que quieres es decir
No quiero que este componente y solo
este componente sabes Solo este
componente sea una isla del servidor y
todo lo demás que sea estático lo que
quieres es mezclarlos porque a nivel de
página es lo que dices es muy sencillo
Pero entonces estás perdiendo las
ventajas que te ofrece cada uno sería un
rollazo no así que yo creo que es verdad
que van por ahí los tiros de que cada
vez vamos a estar viendo más y más el
híbrido este de ir mezclando todos los
frameworks lo van a tener de una forma u
otra eh Astro con sus Islas next es con
el partial prerendering y todos van a
estar haciendo cosas así pero creo que
me parece que tu discusión con Guillermo
sería que proporción internet es
Dinámico Sí o sea yo no digo que no esté
de acuerdo lo que me refiero es que
decir esta frase Por qué los cdn
realmente no funcionan es polémica pero
que puedo entender que se dice que el
sitio es Dinámico Bueno pues por ahí
pueden ir los tiros y tal
5.0 / 5 (0 votes)