Photo by Lautaro Andreani on Unsplash
¡Hola a todos! ¿Cómo estuvo el primer día de su fin de semana largo? Hoy quiero compartir con ustedes conceptos sobre varios modos de renderizado web: SSG, SSR, CSR e ISR. Se ven similares, pero tienen detalles diferentes. Antes de decidir cuál usar, ¡echemos un vistazo a las introducciones a continuación!
Static Site Generation (SSG)
SSG, o generación estática (Static Generation), significa generar archivos HTML al compilar (build) todo el proyecto. Estos archivos HTML ya contienen los datos necesarios para mostrarse. Este modo de renderizado es un tipo de pre-renderizado (pre-rendering). SSG es muy adecuado para sitios web estáticos donde el contenido no cambia, porque todos los datos se obtienen en el momento de la compilación. Estos archivos HTML se pueden colocar en una CDN y guardarse en caché para mejorar el rendimiento del sitio web. Además de esto, adoptar el modo de renderizado SSG también es beneficioso para el SEO.
Server-side Rendering (SSR)
SSR, o renderizado del lado del servidor (Server-side Rendering), significa que cada vez que el navegador (lado del cliente) envía una solicitud (request), el servidor genera el archivo HTML y lo envía de vuelta al navegador para su visualización. Este modo de renderizado es muy adecuado para datos que cambian con frecuencia. Sin embargo, debido a que el servidor toma tiempo para generar el archivo HTML, el tiempo de respuesta del sitio web será más largo y los usuarios verán una pantalla blanca mientras esperan. SSR también se considera un tipo de pre-renderizado, por lo que también es bastante amigable con el SEO~ Pero cabe señalar que este método requiere que el servidor procese constantemente las solicitudes de los usuarios.
Client-side Rendering (CSR)
CSR, o renderizado del lado del cliente (Client-side Rendering), implica más o menos lo que dice su nombre. El archivo HTML enviado por el servidor al navegador puede considerarse sin contenido. El navegador solo puede renderizar en la pantalla después de obtener datos del servidor. El modo de renderizado utilizado por SPA (Single Page Application como React o Vue) es CSR. La mayor ventaja de este modo es que no es necesario volver a buscar archivos del servidor al cambiar de página, por lo que los usuarios no verán una pantalla blanca, lo que se considera una muy buena experiencia de usuario. Sin embargo, el tiempo de renderizado dependerá del entorno del cliente y, debido a esto, la carga en el servidor se reduce bastante.
Incremental Static Regeneration (ISR)
ISR, o regeneración estática incremental (Incremental Static Regeneration), es un modo de renderizado del que se escucha menos y también se considera un tipo de pre-renderizado. ISR genera todos (o parte) de los archivos HTML al compilar el proyecto. Cuando hay una nueva solicitud y ha pasado un tiempo predeterminado, el servidor primero entregará al navegador el archivo antiguo mientras regenera el archivo más reciente en segundo plano, y luego lo enviará al navegador para su visualización una vez que se complete la generación. Si un usuario va a una página que aún no se ha generado, el servidor generará el archivo en el momento y lo almacenará en caché, por lo que el siguiente usuario en esta página puede obtener directamente el archivo de la caché. ISR es muy similar a SSG, pero resuelve el problema de que SSG no puede actualizar el contenido de los datos, y los archivos HTML también se almacenarán en caché en la CDN, por lo que también reduce la carga en el servidor en comparación con SSR.
¿Cuál deberías usar?
Cada modo de renderizado tiene sus pros y sus contras, y cuál elegir depende de nuestro proyecto. No hay un ganador claro.
- Los paneles de control de sistemas internos donde los datos cambian constantemente y no se necesita SEO son muy adecuados para usar CSR.
- Si la tasa de cambio de datos no es baja pero se necesita SEO, puedes considerar usar SSR.
- Si los datos rara vez necesitan actualizarse, como sitios de eventos o de marketing, y el SEO también es importante, usar SSG es muy adecuado.
- Si los datos no necesitan actualizarse mucho o hay demasiadas páginas y se necesita SEO, como páginas de productos, entonces ISR es una buena opción.
También dibujé una tabla (en inglés XD), ¡échale un vistazo!
Pre-render en Next.js
Next.js tiene soporte integrado para los modos de renderizado mencionados anteriormente, y también usa por defecto SSG para renderizar páginas web que no necesitan obtener datos (fetch). Si necesitas obtener datos del servidor, se mezclará con CSR (híbrido). Si deseas utilizar otros modos de renderizado, puedes utilizar las siguientes funciones proporcionadas por Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Obtiene los datos necesarios en el momento de la compilación y los coloca en el archivo HTML |
| getStaticPaths (Static Generation) | Decide qué rutas dinámicas (dynamic) deben generarse como archivos HTML en el momento de la compilación |
| getServerSideProps (Server-side Rendering) | Una función que se ejecuta cada vez que el navegador envía una solicitud para obtener los datos necesarios |
Conclusión
Eso es todo por hoy, ¡continuemos mañana! ¡Mañana compartiré con ustedes cómo usar esas tres funciones para implementar sitios web con diferentes modos de renderizado! ¿Qué opinan sobre los modos de renderizado aprendidos hoy?