¿Por qué los CDNs realmente no funcionan?
El sitio es dinámico.
El sitio utiliza service al rendering y una base de datos.
El sitio necesita escala global y velocidad.
El desarrollador añade CDN en el frontal.
Desarrollador pone caché control.
Ahora el sitio es estático, ¿sí?
Los datos cambian normalmente.
El desarrollador empieza a limpiar la caché 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 debuguear la caché.
El desarrollador entonces paga por un CDN Enterprise.
El desarrollador empieza a utilizar el header de vari,
que es como que varía para saber cuándo tiene que cambiar el contenido.
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 haber un montón de miss y ya no está dando 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 renderizarse ahí.
El sitio se convierte en lento y tiene un montón de layout shift,
un montón de spinners, 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, caché 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 caché 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í mil likes, pero 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 sirve 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 cliente.
¿Qué sitio 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, ESI, que no sé qué será.
ESI no ha funcionado.
¿Qué es ESI?
Edge Site Includes.
Edge Site Includes.
Vale, vale, ya sé lo que es.
No ha funcionado.
En la práctica, debido a que la CDN está desvinculada del código de la aplicación.
ESI no ayuda.
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.
ESI, 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 sería el ESI.
Tú puedes hacer que todo sea dinámico, pero puedes incrustar otra parte que sería
totalmente separada, que pueda tener otro tipo de cache control o lo que sea.
Así que, bueno, sería como incrustar, que al final sería algo parecido.
Es verdad que el ESI puede tener, como una parte de tu web puede tener un cache control
diferente, pero bueno, al final, mira, Daniel, esto tiene que ser byte.
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, 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 a 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 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, vale, ya está, ¿no?
Y luego, las páginas que tienen algo dinámico, como, por ejemplo, yo que sé, pues, 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
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 puedes intentar hacer en un CDN tener esto, porque al final todos estos resultados
de búsqueda tienen que ir cambiándose, tienen que repriorizar cuando van cambiando
todos los filtros.
Además, no lo puedes cachear todo, 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 Chennai, no, Jan Bikapur, dice,
ostras, voy a cambiar la descripción?
Claro, si cambia la descripción, si cambian las evaluaciones, cada cuánto 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 páginas, donde hay cosas estáticas, pero dinámicas y tal, ahí es donde
yo creo que es donde está hablando aquí Guishermo.
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 las 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?
Pero 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 Vercell con Next.js es la más idónea.
Que yo creo que puede tener bastante sentido con el partial pre-rendering, que es estas
cosas que está haciendo Next.js, que tiene bastante buena pinta donde puedes mezclar
por un lado partes estáticas, dinámicas, streamear 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
puedas 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 comportamiento del usuario, esto no lo puedes revalidar, no es tan fácil,
¿no?
Pues esto lo puedes 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 el servidor con este tipo de experimento.
Esto, cada vez más, es una cosa que se está poniendo muy de moda porque está demostradísimo.
Yo creo que es la forma correcta de trabajar con las webs en pleno 2024.
Como, por ejemplo, no solo en XGS, sino que también Astro lo está haciendo.
Astro con los Server Islands, que es lo que ha sacado hace poco, que lo estuvimos comentando
en el proyecto que hicimos en el curso de Astro 5 Middle Life.
En este cursito que hicimos, los Server Islands, pues lo vimos, ¿no?
El hecho de que 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 tengo que cargar 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 sí 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 sentido del mundo, ¿no?
O sea, creo que hay alguna, ves, dice, un CDN puede ser útiles para páginas que son
de service al 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 tiene 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, 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 service al rendering y que quieres que lo tenga un buscador, al final
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 poner un CDN delante 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, tiendas online, 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 cliente 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?
Bueno, revalidate on demand, es que eso no es, ¿verdad? Es que es, el revalidate on demand
puede funcionar para cosas que cambian muy poco, porque para cosas que cambian cada mucho
el revalidate on demand al final cada 2x3 tienes que revalidarlo y entonces estás haciendo el mismo
trabajo solo que la primera vez a lo mejor no lo haces, pero no paras de revalidarlo 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 JSLacro, 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 CDNs 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 Pre-Rendering de NextGS, los Server Islands de Astro,
son soluciones que te pueden simplificar mucho la vida y que te van a ayudar y que ahí yo creo que está la idea.
Lo ideal es dividir la información independiendo de cómo vaya a ser, usar o SSR estático o cliente.
Claro, pero ese es el problema, que lo quieres todo.
No quieres separar la página a que sea server-side 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-side.
Esa es la clave y eso es lo complicado.
El hecho de decidir que la página entera sea server-side es 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, 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.
Astro con sus islas.
Next.js con el partial pre-rendering y todos van a estar haciendo cosas así.
Pero creo que, me parece que tu discusión con Guillermo sería que el proporción de 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 si dice que el sitio es dinámico, bueno, pues por ahí pueden ir los tiros y tal.