Server-Side Rendering y Frameworks que te ayudan: Nuxt, Next.js, Angular Universal, SvelteKit y Astro
En este post de vuelta de vacaciones, voy a intentar explicar una práctica en el desarrollo web bastante popular: el renderizado del lado del servidor.
Esta práctica tiene gran aceptación porque resuelve varios problemas a los que nos enfrentamos con las aplicaciones web modernas, y muchas empresas eligen SSR para:
- Mejorar el rendimiento.
- Optimizar su SEO.
- Mejorar la experiencia de usuario.
Estos puntos tienen un factor común: el tiempo de carga de la página.
La necesidad del SSR (Server-Side Rendering)
Uno de los problemas de las aplicaciones SPA (Single Page Application) es el tiempo que tiene que esperar un usuario para ver el contenido final de una página/aplicación web. Las aplicaciones SPA comienzan con una página HTML en blanco y luego JavaScript inyecta el contenido dinámicamente hasta que la página está completa.
Aunque este enfoque es bueno porque evita recargar la página en cada navegación, también tiene inconvenientes. Principalmente, la carga puede ser lenta, ya que las aplicaciones SPA suelen incluir archivos JavaScript de gran tamaño. Esto implica que tienes que esperar a que se descargue todo el JavaScript del servidor y luego a que se ejecute para que la página se muestre correctamente.
Esto resulta en los siguientes problemas:
-
Problemas de rendimiento y SEO: Primero, problemas como lentitud en la carga de la página o retrasos en la interactividad, que afecta a la experiencia de usuario, y también impactan al SEO, porque el contenido puede no estar disponible en el momento en que los motores de búsqueda lo indexan. Google penaliza estos retrasos utilizando sus odiosas métricas Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) y First Contentful Paint (FCP).
-
Problemas de accesibilidad: Al igual que con el SEO, la carga dinámica del contenido puede dificultar la navegación para tecnologías asistivas, y las actualizaciones de contenido no siempre se informan al usuario, alguien que utiliza un lector de pantalla podría no saber que ha habido un cambio.
Con SSR, el servidor genera el HTML necesario para la primera carga y una vez generado lo sirve al navegador, que lo "hidrata" con datos. Como el navegador recibe el HTML final directamente, se elimina la espera para solicitar el JavaScript y generar el contenido. Esto mejora el SEO y la accesibilidad, ya que el contenido está disponible de inmediato y es más fácil de indexar para los motores de búsqueda.
No hay que confundir SSR (Server-Side Rendering) con SSG (Static Site Generation). Con SSG, el HTML generado es estático y no cambia después de la generación; con SSR, el HTML servido al navegador es reactivo, así que estas aplicaciones combinan lo mejor de los dos mundos: ofrecen la inmediatez del estado inicial de una página SSG porque se recibe el HTML listo del servidor, y a la vez mantienen la reactividad de una SPA.
Principales problemas del SSR y cómo pueden los frameworks solucionarlos
Aunque el SSR ofrece muchas ventajas, también tiene ciertos inconvenientes y es importante tenerlos en cuenta cuando se está trabajando con este tipo de aplicaciones:
Diferencias entre entornos de ejecución
El uso de JavaScript tanto en el servidor como en el navegador puede generar confusión. APIs específicas del navegador, como "document" o "window", no están disponibles en el servidor, lo que complica la gestión de recursos. Los frameworks dedicados proporcionan herramientas que abstraen las diferencias entre entornos, y facilitan la ejecución de código tanto en el servidor como en el navegador.
Mayor carga en el servidor
El SSR puede aumentar la carga del servidor, ya que cada vista HTML requiere una solicitud nueva. Para optimizar el rendimiento, se utilizan mecanismos como almacenamiento en caché y regeneración incremental de contenido estático, lo que reduce presión sobre el servidor.
Sincronización del estado entre el servidor y el cliente
Mantener la consistencia del estado entre los dos entornos puede ser complicado, especialmente en aplicaciones con datos dinámicos. Los frameworks dedicados permiten gestionar y sincronizar datos de forma eficiente.
Depuración en un entorno SSR
Por último, gestionar aplicaciones en un entorno SSR significa recibir errores del servidor y del cliente, y a veces no sabes muy bien de que lado viene el problema. En este caso, los frameworks proporcionan herramientas de depuración y entornos de desarrollo que simplifican la identificación y resolución de problemas.
Frameworks populares
Actualmente existen muchos frameworks y herramientas para ayudarnos con todo esto, nos facilitan el trabajo y también mejoran el rendimiento y la experiencia general de la aplicación.
Entre los más populares se encuentran:
Nuxt
Es un framework basado en Vue que da soporte para SSR y SSG, simplifica el desarrollo con Vue y añade nuevas funcionalidades como rutas automáticas basadas en nombres de carpetas, middleware, entre otras.
En la versión más reciente, Nuxt 3 viene con:
- Nitro como motor ( Nitro ), que permite manejar renderizado híbrido (SSR, ISR, y SSG).
- Nuevas funcionalidades de servidor, como API sin necesidad de un servidor Node.js completo.
- Actualización a Vue 3, aprovechando las mejoras que trae, como el Composition API (un nuevo método modular para organizar la lógica y el estado).
- Autoimportación de componentes y composables mientras los vamos escribiendo en el código.
- Compatibilidad con plataformas como Vercel, Netlify y entornos serverless.
Next.js
Al igual que Nuxt, es un framework que soporta SSR y SSG, pero está basado en React. Tiene herramientas para mejorar el rendimiento, como el ISR (Incremental Static Regeneration), que permite regenerar páginas estáticas de manera incremental. Next.js también ofrece herramientas para optimizar la experiencia del usuario, como la carga diferida de componentes y una API de enrutamiento robusta.
En su versión, Next.js 14, tenemos las siguientes novedades:
- La nueva versión incluye el compilador Turbopack ( Turbopack ), basado en Rust, que acelera el arranque del servidor local considerablemente.
- Ahora con Next.js es posible manejar la lógica del servidor directamente desde componentes de React, sin necesidad de crear rutas API separadas.
- Utiliza React Suspense para cargar contenido dinámico de manera más eficiente, optimizando la carga inicial de contenido.
- Mejora el manejo de imágenes, redimensionándolas automáticamente según el tamaño de la pantalla y utilizando formatos modernos como WebP.
SvelteKit
SvelteKit es otro framework que soporta SSR y SSG, diseñado para aplicaciones Svelte. También cuenta con herramientas que mejoran la generación del contenido dinámico y el rendimiento en el servidor:
- Como usa Svelte, compila los componentes a código JavaScript optimizado sin usar un virtual DOM, así que el código generado para SSR es eficiente y directo.
- Ofrece herramientas integradas para gestionar el estado y las sesiones en el servidor.
- La configuración para habilitar y ajustar el SSR en SvelteKit es más sencilla en comparación con otros frameworks.
- Al igual que Nuxt, permite desplegar aplicaciones con SSR en diferentes entornos de servidor (como Vercel, Netlify, y otros).
Angular Universal
Angular Universal no es un framework, sino un conjunto de herramientas para Angular que nos ayuda a desarrollar SSR y SSG y mejorar el rendimiento de las aplicaciones Angular.
En la última versión nos han dado las siguientes mejoras:
- Mejoras para que el renderizado en el servidor sea más rápido y eficiente, reduciendo el tiempo necesario para generar el HTML.
- Ajustes para manejar mejor aplicaciones con grandes cantidades de datos o estructuras complejas, mejorando la estabilidad y el rendimiento.
- Se han simplificado los procesos de configuración y despliegue haciendo que sea más fácil integrar Angular Universal en proyectos existentes.
- Se ha mejorado el soporte para su motor Ivy, por lo que las páginas se renderizan más rápido y el servidor trabaja de manera más eficiente.
Astro
A diferencia de los demás, no está basado en un framework específico, sino que se integra con tecnologías como React, Vue o Svelte (Angular se queda fuera :-( ). Astro solo carga lo que se necesita y optimiza el rendimiento con SSR.
Como ventajas tiene:
- Permite combinar SSG y SSR así que puedes elegir qué partes de tu app se generan de manera estática y cuáles se renderizan en el servidor.
- Al igual que Svelte, no usa virtual DOM así que renderiza el HTML de manera más eficiente.
- Puedes usar componentes de diferentes frameworks en un solo proyecto, lo que hace que sea super flexible.
- Sus adaptadores facilitan el despliegue en distintas plataformas de hosting y la configuración SSR.
El renderizado del lado del servidor es una técnica muy útil para mejorar el rendimiento y la accesibilidad de nuestras aplicaciones web, especialmente con aplicaciones SPA, y aunque tiene sus retos, los frameworks lo hacen mucho más manejable. Si estás pensando en implementar SSR, échale un ojo a estos frameworks que hemos visto, eligiendo bien te puede ahorrar mucho trabajo y dolores de cabeza.