Tipos de Renderizado - CSR & SSR & SSG & ISR - con Next.js
Stewart Granger Flores - 02 Diciembre, 2020
¿Por qué es importante?
Para evitar esto, necesitamos que las páginas carguen rápido y sean interactivas rápidamente. Para esto, podemos abordar estos casos de diferentes formas, y les mostraré algunas de las diferencias que tiene cada una en este blog.
1- Client Side Rendering (CSR)
Posiblemente, el más común entre los iniciados en el mundo de React.js y Vue.js, es el estado por defecto de las aplicaciones web realizadas con librerías y frameworks Front-end de hoy en día.
El funcionamiento es el siguiente:
• Es rápido para el servidor entregar una página en blanco.
• Tiene soporte para SPAs.
• Es súper rápido una vez todo el Javascript ha sido cargado.
• Entregas una página en blanco al usuario.
• Al entregar una página en vacía, no hay posibilidad de ser indexado por motores de búsqueda.
• Peligroso cuando tienes que cargar mucha información, provocando que el usuario solo vea una página blanca por más tiempo.
• Conexiones lentas pueden pueden provocar rebote de los usuarios.
2- Server Side Rendering (SSR)
Este modelo como su nombre lo indica, crea la página final en el lado del servidor, llenándola con información previo a entregársela al usuario.
El funcionamiento es el siguiente:
1° Primero el usuario ingresa a la página lo que hace una petición al servidor web o CDN donde esté alojada nuestra página web.
2° Luego React corre en el servidor, empezando a ejecutar las llamadas a las APIs para obtener la información que quiere utilizar la página.
3° Las APIs entregan la información requerida por el servidor.
4° Con el HTML montado, el servidor entrega la página completa al cliente.
5° Cuando le llega la página al cliente, React empieza a comparar la página entregada con el javascript en su fase de hidratación generando el Vdom, si es exitoso ambas partes se reconcilian y estás listo para usar la página.
• Es bueno para páginas que necesitan tener un buen SEO y que quieren ser indexadas por motores de búsqueda
• El contenido entregado por el servidor es inmediato.
• Funciona perfectamente en conexiones lentas.
• No hay peticiones a APIs en el lado del cliente.
• Es más pesado para el servidor
• No puede ser cacheado debido a las peticiones que hace, por lo que se asume que esta información necesita ser nueva cada vez que el cliente quiere entrar a la página
• No funciona bien con librerías que necesitan acceder a la propiedad document.
• Genera problemas de hidratación si se accede a variables de localStorage o información que no puede ser obtenida en el lado del servidor.
3.- Static Side Generation (SSG)
Con este modelo, movemos el trabajo de renderizado de las páginas desde el lado del cliente y del lado del servidor hacia nuestro proceso de compilación o build generando toda las páginas y entregando páginas cacheadas al usuario.
El funcionamiento es el siguiente:
-Previamente- Al querer desplegar la página para producción se tiene que hacer un build, que por lo general es manejado por páginas como Vercel ó Netlify acá Next.js comienza a generar todas las páginas haciendo llamadas a las APIs para poder obtener la información y generar las páginas estáticas.
1°Primero el usuario ingresa a la página lo que hace una petición al servidor web o CDN donde esté alojada nuestra página web.
2°El CDN entrega la página inmediatamente al ya tener la página generada, cargada en el build.
• Las páginas son muy rápidas.
• Se genera una vez y luego el CDN la entrega inmediatamente al usuario.
• No tenemos peticiones por el lado del cliente.
• Perfecto para páginas que requieren un buen SEO.
• No tiene estado de carga, ya que nada necesita ser cargado, todo fue previamente cargado en el build.
• No hay necesidad de tener un servidor.
• Tiene un build time más largo que el resto de los modelos.
• No funciona bien con librerías que necesitan acceder a la propiedad document.
• Genera problemas de hidratación si se accede a variables de localStorage o información que no puede ser obtenida previa a la generación de la página.
4.- Incremental Static Regeneration (ISR)
Esta es una adición que se agregó a Next.js hace unos meses, tomando como base el hecho de que las páginas serán generadas en el build time, podemos agregar una configuración para que la página vuelva a ser generada en request time o sea cuando el usuario entra a la página.
Esto funciona bajo el encabezado HTTP Cache-Control lo que significa que dada X cantidad de tiempo entregada en milisegundos, se volverá a generar la página y será cacheada y reemplazada por la previa versión de la página. Entregando nueva información al usuario cada cierta cantidad de segundos.
Por qué considerarlo
• Nos entrega la posibilidad de evitar recompilaciones si la información cambia seguido, pero no tanto.
• Si tenemos una gran cantidad de páginas no queremos tener que volver a compilar todas estas páginas cada vez que surga un cambio, esto lo soluciona.
• Tenemos todas las ventajas previamente mencionadas tanto por SSR y SSG sumando estas nuevas que acabo de mencionar.
• Sumamente fácil de agregar con solo una línea de codigo.
export async function getStaticProps(context) {
const res = await fetch("https://yourapi.com/productos");
const data = await res.json();
return {
props: {
products: data.products
},
revalidate: 60 // ** <- Esta línea de código **
}
}
Si quieres saber más visita la documentación de ISR en la página de Next.js
Con esto termino...
Espero que hayas podido aprender algo de todo esto :)