DEV Community

Cover image for SPA, SSG y SSR ¿Cuál selecciono?
Jhon Alessandro
Jhon Alessandro

Posted on

SPA, SSG y SSR ¿Cuál selecciono?

No todo se basa en la arquitectura, sino en las herramientas que utilizas para alcanzar tus objetivos mediante una página web 🌐

A veces, solemos usar ciertas tecnologías por simple hecho de ser “tendencia, recomendables u opciones confiables”, sin embargo; ¿Son en realidad lo que necesitas?

Por lo general no lo sabes hasta que ya has obtenido cierta experiencia

Ya el foco no se encuentra en ti creando una aplicación, sino en tus usuarios consumiendo un producto, y la compatibilidad de tu metodología de trabajo sinergizado al producto

Asi es, hablo de cómo tus productos (Apps, websites, APIs) son diseñadas

En este momento, pongamos el foco en las “Websites”, que es el principal punto donde tus usuarios se conectarán contigo o con tu producto

Si fuera un proyecto desde cero, ¿Por donde empezarías? Por crear la página, no?

React + Vite, seguro fue lo primero que se te vino a la cabeza
Next.js, la opción que lo tiene todo
Laravel + Blade por si te sientes con furia y quieres que todo se haga desde el servidor

Es aquí, donde entra en juego tres conceptos esenciales:

✅ SSG → Static Site Generator
✅ SSR → Server Side Rendering
✅ SPA → Single Page Applications

¿Quieres crear un sitio estático, sencillo, con SEO amigable? SSG y SSR te vienen como anillo de diamante al dedo 💎

Static Site Generator o SSG es principalmente una manera de crear recursos HTML, CSS Y javascript de manera estática, es decir, los recursos de la página en cuestión son generados en tiempos de “Building”, empaquetados y listos para ser utiilzados

Por otro lado, el SSR o Server Side Rendering, te permite tener tus recursos servidos y preparados desde el servidor, piensa que es como un “Delivery”, la pizza que llega a tu casa ya hecha, solo tienes que consumirla

Estas 2 estrategias, se pueden lograr hoy en día con bastante facilidad, frameworks como:

⛏️ Next.js
🔨 Inertia
🔪 Astro

Manejan esa gran complejidad por ti, y de manera sencilla y modificable, según requieras. Puedes servir páginas desde el servidor, o ya listas utilizando una página estática

¿Quieres crear un sitio web muy dinámico, cambiante y caótico?

Las SPA te darán no solo esto y mucho más

Single Page Applications, o SPAs, son la forma dinámica por excelencia de renderizar páginas dinámicas de manera inteligente y moderna

Piensa en un dashboard de negocios, donde no es requerido SEO, y quieres estar actualizado en las últimas tecnologías y renderizar todo según se requiera

Las SPA son tu aliado

”Un solo punto de encuentro, el resto, se encarga javascript”

¿Qué tiene de importante que sepas estos conceptos?

La principal y simple razón es por la utilidad que estas ofrencen dependiendo del caso

No es lo mismo tener una página con buen SEO renderizada bajo demanda (En el caso de usar SSR) a una página web cuyo principal propósito es proveer información, como un blog (Caso de un SSG) hasta crear una aplicación web dinámica con múltiples cambios en tiempo real (Caso de una SPA)

Puedes usar la que tu quieras, sin embargo, es questión de entender “Cuando” utilizar una de las 3

Hasta puedes utilizar las 3 al mismo tiempo:

✅ Necesitas una landing page o páginas de blogs? Usa SSG, ejemplo, ASTRO
✅ Necesitas múltiples páginas en las cuales algunas son dinámicas pero otras no? Sírvelas usando SSR, Next.js
✅ Necesitas crear una web app? Usa SPA, react + vite (O en mi caso, Laravel + Inertia + React)

De esta forma, te ahorrarás mucho tiempo pensando en qué stack te proporcionará esto y aquello y podrás enfocarte más en el desarrollo y menos en las configuraciones

Top comments (0)