Server Side Render vs. Static Site Generation

¿Qué es SSG o Static Site Generation (SSG)? ¿Qué diferencias tiene con Server Side Rendering (SSR)? ¿Cuáles son sus beneficios? ¿Nuevos poderes con Edge Functions y las revalidaciones?

SSG

¿Qué es SSG o Static Site Generation (SSG)? ¿Qué diferencias tiene con el Server Side Rendering (SSR)? ¿Cuáles son sus beneficios? ¿Nuevos poderes con Edge Functions y las revalidaciones?

Alrededor del 2010 con la popularización de las Single Page Aplications (SPA) por lo mucho que facilitaban la creación de aplicaciones complejas, comenzaron a surgir nuevos retos en el mundo del desarrollo web.

Debido a que estas aplicaciones generan todo el HTML en el cliente, carecían de SEO, debido a que los "Web Crawlers", la herramienta que utilizan los buscadores para analizar el HTML de las páginas para indexarlas, solo veían un HTML vacío.

Actualmente, la mayor parte de los buscadores ya ejecuta el JavaScript necesario para indexar correctamente las páginas.

Otro problema era el excesivo tiempo de carga causado por todos los procesos adicionales necesarios para mostrar un sitio web.

Server-Side Rendering (SSR)

Una solución a estos problemas fue el Server Side Rendering, donde el renderizado se realiza en el servidor, devolviendo únicamente archivos estáticos listos para mostrar en el navegador.

Cada que un usuario visita una página, el proceso de renderizado en el servidor se repite, y esto puede volverse sumamente costoso.

Si la página contiene demasiadas secciones dinámicas, con contenido específico para el usuario, tiene sentido emplear el Server Side Rendering para generar la página web para cada usuario.

Sin embargo, si el contenido siempre es el mismo como en la página de Términos y Condiciones o en un Blog como este, no hace sentido, generarlas una y otra vez.

Static Site Generation (SSG)

Se le llama así al proceso de construir los archivos HTML de un sitio web al momento de hacer un deploy para que cuando un usuario acceda a una página, está este lista para ser mostrada en el navegador.

Con esta estrategia, todo el JavaScript y todas las peticiones a la API necesarias para generar el codigo HTML a mostrar, se realizan una sola vez al momento de ejecutar un deploy, después de ser procesadas y generadas, las páginas se guardan como estáticos y están disponibles velozmente.

Actualmente, no es necesario ejecutar un nuevo deploy cuando algo cambia, por ejemplo, Next.js nos permite crear o actualizar páginas estáticas después de haber creado su sitio gracias al Incremental Static Regeneration (ISR). Una función que nos permite conservar los beneficios de la generación estática mientras escala a millones de páginas.

Server Side Rendering vs. Static Site Generation

Server SIde Rendering (SSR)

Pros

• Puedes generar páginas altamente personalizadas para el usuario
• Si los datos cambian con demasiada frecuencia, utilizar SSR es una buena idea

Contras

• Necesitas un servidor para procesar cada transacción, esto puede ser sumamente costoso.

• No puedes cargar archivos tan rápidamente como lo harías un CDN.

Static Site Generation (SSG)

Pros

• El sitio será extremadamente rápido.
• Tienes archivos estáticos listos, sin tener que esperar cierta lógica del lado del servidor.
• El sitio funcionará incluso si tu servidor se ha caído

Contras

• No es ideal si el contenido es muy dinámico o específico del usuario.

---

Las ventajas de los sitios generados estáticamente sigue aumentando.

En las últimas versiones de Next.js contamos con la generación de páginas bajo demanda desde una API. Reduciendo aún más la cantidad de veces que una página es generada.

También Next.js añadió una nueva característica: Las Edge Functions. Una característica que nos permite generar múltiples archivos estáticos para una misma URL y escoger cuáles servir desde el CDN, obteniendo así los beneficios de los sitios estáticos con todo el poder y el dinamismo, pudiendo así personalizar tu sitio sin sacrificar velocidad o performance.

En este post te contamos como utilizar cada una de las estrategias con React y Next.js, tenemos una página de ejemplo donde puedes comparar la velocidad de carga de cada una de ellas.

Síguenos en redes sociales para que no te pierdas nuestros próximos post sobre estos temas y puedas optimizar tus sitios web al máximo aprovechando las últimas tecnologías.

¿Conoces otras herramientas que hagan esto? ¿Quieres que te enseñemos a usarlas?

Comparte el blog en Redes Sociales y cuéntanos que te gustaría continuar aprendiendo.

¡Sé valiente y No te rindas!