Regeneración Estática Incremental: Sitios Estáticos Potenciados

Hola a todos. Mi nombre es Facundo y hoy hablaremos sobre la regeneración estática incremental.

Quiero presentarme. Como dije, mi nombre es Facundo Giuliani, soy de Buenos Aires, Argentina. Trabajo como ingeniero de relaciones con desarrolladores en Storyblock. También soy embajador de Auth0, embajador de Prisma y experto en desarrollo de medios de Cloudinary. Si quieres hablar sobre alguno de estos productos o cualquier otra cosa, puedes escribirme. Mi sitio web es fgiuliani.com y estoy en Twitter como Facundo Zurdo.

En primer lugar, quiero definir qué es una página web estática. Es una página web que se entrega al navegador del usuario exactamente como una tienda. Por lo tanto, podemos tener una página web conformada por un archivo HTML, un archivo CSS y un archivo JavaScript. Y eso se considerará una página estática. Eso no significa que el contenido de la página sea estático, pero estaremos entregando los mismos archivos a todos los usuarios que visiten nuestro sitio web. Y esa es la diferencia con una página web dinámica, donde es una página web en la que parte del contenido se genera dinámicamente cuando es necesario. Podemos generar contenido HTML sobre la marcha que entregaremos al usuario que visita nuestro sitio web dependiendo, no sé, de alguna condición o lógica que tengamos y que ejecutamos en nuestros servidores web. Tenemos diferentes formas de generar este contenido dinámico. Una de estas formas es utilizando el renderizado en el lado del servidor, donde el contenido HTML que se genera dinámicamente se realiza en el servidor web. Por lo tanto, el servidor web será el que generará el contenido HTML y entregará al usuario una página web que se verá como una página estática, pero en realidad, el contenido HTML o parte del contenido HTML se generó. Por otro lado, el renderizado en el lado del cliente es cuando el contenido HTML se renderiza directamente en el navegador utilizando JavaScript. Esto sería el caso de uso común para React, donde el contenido HTML que generamos o el marcado que generamos se basa en los componentes que tenemos en nuestra aplicación. Y cualquier otra aplicación de una sola página que podamos crear utilizando React u otros frameworks de JavaScript. Pero volvamos a la página web estática, porque si las analizamos, podemos ver que tienen diferentes beneficios que ofrecen las páginas web estáticas. Por ejemplo, las páginas web estáticas son rápidas porque simplemente entregamos archivos que se almacenan en un servidor web tal como están almacenados, por lo que no tenemos que hacer ninguna lógica para generar el contenido que queremos entregar. Son económicas porque simplemente almacenamos archivos como cualquier otro sistema de archivos. Son más fáciles de mantener porque estos archivos que creamos, no sé, probablemente escribimos el contenido en un editor de texto o algo así utilizando el método que queramos. Podemos mover un archivo de un lugar a otro, podemos implementar nuevas versiones de nuestro sitio web simplemente moviendo los nuevos archivos al servidor web, etc. Son seguras porque no ejecutamos ningún código en cada solicitud que recibimos, por lo que no tenemos que preocuparnos por la seguridad de ningún código que se ejecute porque no se está ejecutando ningún código. Es más fácil de escalar porque podemos agregar espacio de almacenamiento a nuestro servidor web y eso será suficiente para obtener más archivos y crear más páginas para nuestro sitio web. Y es estable porque no estamos realizando ningún cálculo o procesamiento en cada solicitud, simplemente entregamos archivos y eso será más estable para nuestro sitio web.

Teniendo en cuenta estos beneficios de las páginas web estáticas que se crearon, no sé, a principios de los años 90, por ejemplo, con los últimos marcos de trabajo y herramientas que se desarrollaron en los últimos años, apareció un nuevo concepto. El concepto de generación de sitios estáticos, que es compilar y renderizar una aplicación web en tiempo de compilación, generando activos estáticos como archivos HTML, JavaScript y CSS. Por lo tanto, tendremos diferentes fuentes de datos, contenido, motores de plantillas, bases de datos, APIs y servicios de terceros, y podemos generar la lógica que creará el contenido HTML para nuestro sitio web y utilizaremos un generador de sitios estáticos para ejecutar un proceso de compilación para nuestro proyecto y generar activos estáticos que serán nuestro sitio web. Estos activos estáticos que desplegaremos en el servidor web más tarde se generan cuando ejecutamos un proceso de compilación con el generador de sitios estáticos y todo el contenido dinámico que generamos utilizando los diferentes recursos de procesamiento y datos que tenemos se analizará y, digamos, se renderizará en tiempo de compilación. Por lo tanto, podemos estar seguros de que cuando los usuarios visiten nuestro sitio web, verán activos estáticos, páginas estáticas y quiero decir que estamos utilizando los beneficios de los sitios estáticos pero utilizando marcos de trabajo y herramientas de los últimos años. Hay varios generadores de sitios estáticos, hoy me centraré en Next.js, que es un marco de trabajo de React que nos permite crear interfaces de usuario, páginas estáticas y páginas renderizadas en el lado del servidor. Por lo tanto, podemos trabajar a nivel de página, digamos, podemos crear archivos JavaScript para cada página que tendremos en nuestro sitio web o podemos crear rutas dinámicas que generarán diferentes páginas que siguen ciertos criterios o ciertas URL, digamos, y podemos utilizar a nivel de página o diferenciando cada página, cómo queremos renderizar el contenido para ella. Por lo tanto, podemos tener generación de sitios estáticos para algunas de las páginas en nuestro sitio web, digamos que tenemos, por ejemplo, un blog, podemos utilizar la generación de sitios estáticos para generar la página de inicio de nuestro blog y luego una página por artículo o por publicación de blog, digamos, ya que el contenido que expondremos en nuestra publicación de blog siempre será el mismo y para todos los visitantes de nuestro sitio web, podemos generarlos de antemano y en tiempo de compilación, generar páginas estáticas y activos estáticos que desplegaremos en el servidor web y estarán disponibles para ser visitados por nuestros visitantes. Pero también podemos tener, no sé, páginas dinámicas en nuestra plataforma o nuestro sitio web y podemos utilizar el renderizado en el lado del servidor en esos casos o el renderizado en el lado del cliente dependiendo de lo que necesitemos. Quiero decir, el renderizado en el lado del cliente sería como el React regular, pero también podemos utilizar el renderizado en el lado del servidor, por lo que el servidor devuelve una página con un contenido HTML dinámico que se creó al vuelo pero en el servidor. También podemos tener rutas de API en Next.js para ejecutar código, como lo hacen las funciones sin servidor, por lo que pueden devolver servicios o consumir APIs utilizando rutas de API. Y una de las otras características interesantes que tiene Next.js es que tendremos una actualización rápida en el entorno de desarrollo. Por lo tanto, si estamos utilizando, por ejemplo, la generación de sitios estáticos, eso no significa que cada vez que apliquemos un cambio en el contenido o el código de nuestro sitio web, debamos ejecutar el proceso de compilación nuevamente. El código se cambiará, por ejemplo, y los cambios aparecerán automáticamente en nuestro navegador mientras trabajamos localmente. Por lo tanto, vemos que podemos crear sitios estáticos pero utilizando nuevas herramientas y diferentes fuentes de datos y motores de plantillas, etc., todo en tiempo de compilación. Nuevamente, volviendo al mismo ejemplo, podemos crear un sitio de blog con muchos artículos de blog renderizando todo el contenido que necesitamos de antemano y desplegando activos estáticos, pero esto tiene un problema porque, um, cuando comenzamos a crear más y más artículos y publicaciones de blog, etc., y nuestro sitio web se vuelve más grande, el tiempo que necesitaremos para generar

Pero, bueno, quiero decir que el aumento del tiempo de compilación es un problema, por lo que el equipo de NetJS analizó eso y creó una nueva función para el marco de trabajo que es la regeneración estática incremental, que permite a los desarrolladores utilizar una generación estática pero por página sin tener que reconstruir todo el sitio. Esta función funciona de la siguiente manera. Ejecutaremos este proceso de compilación una vez. Generaremos todos los activos estáticos o todas las páginas estáticas o probablemente un conjunto limitado de páginas en un sitio de blog, serían probablemente las últimas cinco publicaciones de blog y la página de inicio, digamos, y almacenaremos en caché la versión, esta versión uno de las páginas, y estableceremos el valor para la propiedad de revalidación, que es revalidar y estableceremos una cantidad de segundos que ocurrirán entre la primera vez que los usuarios visiten esta versión uno de la página y cuando expire este tiempo de revalidación, lo que el marco de trabajo hará es que para el próximo usuario que visite nuestro sitio web, mostraremos la versión en caché de la página, pero en segundo plano se ejecutará un proceso de compilación solo para esa página y generaremos la nueva versión de esa página que se creará la página estática almacenada en el servidor web y en caché, por lo que los próximos usuarios que visiten nuestro sitio web verán esta versión dos de la página. Esto es útil porque tendremos compilaciones más rápidas porque generaremos menos activos estáticos en tiempo de compilación y tendremos una caché más alta debido a esto, porque mientras tanto estaremos generando nuevas versiones de la página y las mantendremos en caché. Esto también ayuda a trabajar con sistemas de gestión de contenido sin cabeza o diferentes sistemas de contenido que podemos usar para generar el contenido que mostraremos en nuestro sitio web, porque si se aplica un cambio al contenido de nuestro sitio web, digamos el mismo ejemplo de la publicación de blog, si tenemos un error tipográfico o estamos cambiando algún contenido para una publicación de blog, la próxima vez que el usuario visite esa publicación de blog o la página para ese artículo, utilizaremos la regeneración estática incremental para generar una nueva versión de la página y mostrar eso a todos los demás usuarios que visiten nuestro sitio web. Y estas páginas persistirán entre implementaciones, por lo que si queremos implementar una nueva versión de nuestro archivo de nuestro sitio web porque no sé, hicimos muchos cambios en el código o cualquier cosa, las páginas que se generaron utilizando la regeneración estática incremental se mantendrán allí, lo cual es genial, pero también tenemos el problema de que estamos rompiendo la implementación atómica, el concepto que mencionamos antes. Veamos una demostración rápida de cómo funciona esto. Tengo este sitio web con un título y una cuadrícula de características, digamos, y usaré los tres métodos diferentes para generar una página que mencionamos. El renderizado en el lado del servidor, la generación de sitios estáticos y la regeneración estática incremental. Entonces, estoy ejecutando esta página con el renderizado en el lado del servidor. Siempre generaremos en tiempo real el contenido, por lo que el contenido siempre estará actualizado porque lo estamos ejecutando para cada solicitud. Si utilizo la generación de sitios estáticos, siempre veremos la misma página porque se generó en tiempo de compilación. Si utilizamos la regeneración estática incremental, veremos la página que se creó en tiempo de compilación, la página estática. Pero si hacemos un cambio, veremos ese cambio para los próximos visitantes después de aplicarlo porque ejecutaremos este proceso de compilación nuevamente solo para esta página. Si vamos al código de mi sitio web, no me detendré a explicar la jerarquía de carpetas y archivos que Next.js crea para un proyecto. Tendremos una carpeta llamada páginas y dentro de ella tenemos las tres URL que visité con las rutas dinámicas que mencioné antes. Dependiendo del slug, qué página mostraremos. Tendremos una función principal que usaremos para renderizar el contenido html para nuestra página utilizando componentes aquí como componentes de react. Tengo un diseño y una página y usamos el contenido que traemos de una API, que es una llamada de API de un CMS sin cabeza que estoy usando para mantener el contenido de mi sitio web. El sistema de gestión de contenido sin cabeza que estoy usando es storyblock. Estamos usando el cliente de storyblock para obtener la información de una determinada página o historia y con los datos que estamos trayendo de la API, lo devolvemos como una propiedad, como una historia, a la función principal que generará todo el marcado para nuestra página. Si ves aquí, estoy codificando el slug o la URL de una página porque esta es la única página que tengo en mi sitio y este método get server site props se ejecutará para cada visitante que llegue a nuestro sitio web. Si vamos a este ejemplo, que es la generación de sitios estáticos, la función principal es exactamente la misma. Tenemos una función muy similar llamada get static props que se ejecuta igual y trae la información y la devuelve a la función principal para generar el marcado. Pero como necesitamos definir qué páginas vamos a renderizar en tiempo de compilación, tenemos esta otra función llamada get static paths con la lógica para generar todas las URL o todas las páginas que queremos renderizar en tiempo de compilación.

Como solo tenemos una página en nuestro sitio web, que es la página de inicio de Slack, estamos devolviendo un objeto JSON con la propiedad paths y solo ese elemento que se utilizará en get static props para obtener esos parámetros y usar el slack que estamos enviando para generar el marcado para esa página. Si tenemos más de una ruta, tendremos una lista de rutas aquí que estamos devolviendo y estamos renderizando el contenido para cada una de esas rutas. En el ejemplo de regeneración estática incremental, el código es muy similar al que acabamos de ver, quiero decir, la función principal. También tenemos get static props porque estamos generando las páginas en tiempo de compilación y get static paths porque queremos generar esta página de inicio también en tiempo de compilación. Pero estamos cambiando este fallback a blocking porque queremos generar el marcado de la página en segundo plano si establecemos un valor de revalidación, que está aquí y que es de 10 segundos. Esto significa que si un usuario visita nuestro sitio web después de 10 segundos desde la primera vez que mostramos la página en segundo plano, ejecutaremos un proceso de compilación para esta página para generar el nuevo marcado. Y ese es el ejemplo que quiero mostrar aquí. Aplicaremos el cambio al contenido y veremos cómo funciona para cada tipo de renderizado. Este es el editor visual en tiempo real que tenemos para Storyblock, que está conectado a mi localhost. Entonces, lo que haría es ir aquí y aplicar un cambio. Podemos aplicar este cambio aquí, el feature one se llamará ahora feature test, y guardaré el cambio aquí. Puedes ver que puedo ver los cambios incluso si no guardo o aplico los cambios a la información. Esa es una característica del editor visual en tiempo real de Storyblock. Pero ahora vamos a nuestro sitio real. Digamos que veré qué sucede con el renderizado en el lado del servidor, que es después de cargar la página vemos el feature test, lo cual es correcto porque para cada visitante generamos el contenido dinámico sobre la marcha y mostramos el contenido actualizado para cada visitante. Pero si voy a la generación de sitios estáticos, lo que veré es la versión anterior porque creamos esta página en tiempo de compilación y no ejecutamos ningún proceso de compilación nuevamente. Entonces estamos mostrando la página estática que generamos al principio y podemos ver el contenido actualizado. Por último, si vemos el ejemplo de regeneración estática incremental, lo que veremos es nuevamente la página estática que generamos en tiempo de compilación, pero en segundo plano deberíamos estar ejecutando este proceso de compilación para generar una nueva versión de la página para los próximos visitantes que vendrán a nuestro sitio web. Entonces, si actualizo la página, lo que veré es el contenido actualizado y tenemos esta versión dos de la página para todos los visitantes que vendrán a nuestro sitio web y bueno, estamos usando la función de regeneración estática incremental aquí.

Si quieres aprender más sobre esto, puedes ir al sitio web oficial de NetJS, tienen una demostración de comercio electrónico que es una plataforma de comercio electrónico que utiliza la regeneración estática incremental para comprender mejor cómo funciona el concepto o tal vez ver un ejemplo más complejo o si no conoces NetJS o quieres aprender más sobre él, tienen una plataforma de aprendizaje muy interesante que también puedes visitar en su sitio web oficial. Así que muchas gracias, espero que disfrutes esta presentación y nos vemos pronto. ¡Adiós!