En el contexto de los Frameworks de desarrollo Web Modernos, es común encontrarse con el concepto de Server Side Rendering. Entonces, surge la pregunta: ¿Qué implica verdaderamente el Server Side Rendering y por qué ha ganado tanta relevancia en estos últimos años en el campo del Frontend?
¿Qué es?
El Renderizado del lado del Servidor, comúnmente conocido como SSR y traducido al español como Renderizado del lado del Servidor, como su nomenclatura sugiere, se presenta como una táctica para transformar archivos en el backend y enviar información previamente elaborada al navegador en respuesta a sus solicitudes, todo ello con el fin de potenciar dos elementos:
- El SEO (Search Engine Optimization) en una aplicación web.
- Aumentar la velocidad de carga inicial, es decir la primera vez que el sitio es visitado.
Y es crucial no mezclarlo con el concepto de Generación de Sitios Estáticos, dado que esto implica generar archivos en el backend antes de llevar a cabo el despliegue en producción, y un servidor envía estos archivos que mantienen su inmutabilidad (Archivos estáticos). Puedes indagar más sobre este tema en el artículo ¿Qué son los Generadores de Sitios Estáticos?
En la actualidad, una forma de desarrollar sitios web implica la separación de proyectos para el Backend y el Frontend. En el backend, puedes emplear Frameworks como Express, Django, Laravel, Spring, Ruby on Rails y muchos otros.
Dentro del ámbito del frontend, es una práctica frecuente utilizar frameworks de Javascript como React, Vue, Angular, Svelte o incluso optar por Javascript puro (Javascript Vanilla).
Para establecer la conexión, puedes desarrollar APIs (REST APIs, GraphQL) en el backend que devuelvan datos en formato JSON.
Funciona de la siguiente manera:
- Un navegador llama por primera vez a un sitio web.
- El servidor suministra archivos en formato HTML, CSS y Javascript (generados por algún framework de Javascript). Esta primera solicitud tiene como propósito cargar la estructura básica de tu aplicación web, lo que implica que ya no será necesario solicitarla en próximas interacciones del usuario.
- Una vez que estos archivos han sido cargados, se realizan solicitudes HTTP al servidor exclusivamente para obtener datos, los cuales comúnmente se presentan en formato JSON.
La ventajas son:
- Optimizar la experiencia del usuario, ya que este ya no espera la carga de una nueva página en cada interacción y los datos, al llegar en formato JSON, son más eficientes y no tienen el mismo peso que enviar interfaces de HTML.
- El Frontend y el backend pueden ser desarrollados de manera independiente, utilizando lenguajes de programación diversos y sin que interfieran entre sí.
- La misma API del Backend puede ser utilizada posteriormente en otras aplicaciones cliente, como aplicaciones móviles, aplicaciones de escritorio o CLI (Interfaz de Línea de Comandos).
Deventajas de SPA
Los rastreadores de los motores de búsqueda tienen más dificultades para comprender cuál es el contenido de la página que se está cargando, es decir, la capacidad de extraer párrafos, enlaces, títulos y demás elementos. Esto se debe a que las SPA generalmente carecen de:
- Metadatos
- URLs Unicas
- Analiticas
- Indexacion
Además, son mucho más susceptibles a ataques de Cross-Site Scripting (XSS), es decir, usuarios malintencionados pueden insertar scripts en tu sitio web.
Y aunque no es una situación común, aquellos que tengan deshabilitada la ejecución de Javascript en sus navegadores no podrán visualizar tu sitio.
Entonces, como una manera de abordar esto, podemos llevar a cabo Pre-Rendering o Server Side Rendering de una SPA. Esto implica que, a pesar de que la página puede estar utilizando Javascript para construir la interfaz, la carga inicial de la página será generada en el servidor, lo que implica que el navegador recibirá un HTML con código y no uno vacío.
Frameworks de Server Side Rendering
En la actualidad, dado que SSR es un concepto y no una tecnología específica, su implementación es posible en cualquier framework de Frontend, aunque algunos lo simplifican más que otros. A modo de referencia, estos son algunos Frameworks modernos que incorporan SSR:
- React
- Nextjs
- Remix
- Blitzjs
- Redwoodjs
- Gatsby
- Svelte
- sveltekit
- Routify
- Vue
- Nuxtjs
- Quasar
- Solidjs
- Solid Start
- Vanilla Javascript
- Vite SSR
Ahora bien, un aspecto a tener en cuenta con todos estos frameworks es que son frameworks de Javascript. Esto se debe a que muchos optan por utilizar Node.js como herramienta de desarrollo. Además, lo están incorporando como servidor para Server Side Rendering, por lo general junto a un framework llamado Express, al emplear el mismo lenguaje en el backend y frontend.
Y a pesar de que es factible llevar a cabo SSR en frameworks de backend de otros lenguajes como Laravel o Django, por ejemplo, resulta mucho más desafiante al no utilizarse paquetes de Javascript y no haber tanta información disponible en comparación.
No obstante, puedes incorporar de manera sencilla estos frameworks de backend en cualquier lenguaje, y en lugar de tu framework de Frontend, vincularlo a las APIs de Backend que ya hayas creado. De este modo, tendrás un Stack muy adaptable (CSR, SSR y SSG). Aunque demandará un poco más de tiempo comprender todos estos conceptos si eres un desarrollador FullStack.
Conclusión
En conclusión, la elección entre Server Side Rendering (SSR) y Client Side Rendering (CSR) en el desarrollo de aplicaciones web depende en gran medida de las necesidades específicas de tu proyecto. Si tu aplicación presenta contenido estático que no cambia con frecuencia y requiere una carga inicial rápida junto con una indexación efectiva para motores de búsqueda, SSR es la elección acertada. Esto es especialmente útil para secciones como artículos de blogs, páginas de productos en un ecommerce o sitios de noticias.
Por otro lado, si tu aplicación es altamente interactiva, hace un uso extenso de Javascript y el SEO no es una prioridad, entonces optar por CSR es más adecuado. Este enfoque es ideal para paneles administrativos, feeds de redes sociales, aplicaciones de streaming y similares.
En la práctica, la decisión entre SSR y CSR se vuelve más accesible gracias a los frameworks modernos, los cuales ofrecen la flexibilidad de elegir el enfoque según las necesidades específicas de cada página. Para los desarrolladores principiantes, la recomendación es comenzar con la construcción tradicional de frontend utilizando su framework de Javascript favorito y agregar SSR a medida que se familiarizan con los conceptos fundamentales. Es importante tener en cuenta que la implementación de SSR puede ser más compleja, ya que implica un entendimiento más profundo de los conceptos tanto del backend como del frontend. No obstante, a medida que dominas estas habilidades, te beneficiarán de un rendimiento optimizado y una experiencia de usuario más robusta en tus aplicaciones web
