Comprender cómo funciona el server side rendering (SSR) y qué implicaciones tiene para tu proyecto es fundamental antes de implementarlo. A continuación se desglosan las ventajas que ofrece, los costos que conlleva y los conceptos técnicos que debes dominar para tomar decisiones informadas.
¿Qué ventajas ofrece el server side rendering en SEO y rendimiento?
La primera gran ganancia del SSR es la mejora en indexación y SEO [00:10]. Cuando el servidor genera el HTML completo antes de enviarlo al navegador, los motores de búsqueda reciben de inmediato todo el contenido: textos, headings, títulos y etiquetas relevantes. Esto significa que la página es rastreable desde el primer momento, sin esperar a que JavaScript construya el DOM en el cliente.
Esta entrega inmediata del HTML también produce una carga inicial más rápida [00:30], lo que se traduce en mejoras de performance. Al contar con todos los elementos HTML desde el primer vistazo, la accesibilidad se beneficia de forma directa, porque las tecnologías de asistencia pueden interpretar el contenido sin depender de scripts adicionales.
¿Cómo funciona el SSR como proxy server?
Otra ventaja importante es usar el servidor como un proxy server [00:48]. En lugar de que el navegador haga peticiones directas a APIs externas —como la de Rick y Morty o la de la NASA—, el servidor intercepta esas respuestas, las procesa y las entrega al cliente de forma limpia. Esto resulta especialmente útil cuando los datos vienen mal formados o son difíciles de manejar.
- Centraliza el manejo de datos en el servidor.
- Permite aplicar políticas de transformación y validación antes de llegar al cliente.
- Facilita el prefetching de datos [01:18]: la información se carga desde el servidor sin que el navegador realice ninguna request.
Imagina solicitar una base de datos con mil usuarios. Con prefetching, esos datos se envían directamente desde el servidor al cliente, ahorrando peticiones en el navegador e incluso reduciendo el consumo de datos del usuario.
¿Cuáles son las desventajas del server side rendering?
El SSR no es gratuito. La primera desventaja es el costo de infraestructura [01:50]. A diferencia de archivos estáticos que puedes alojar en servicios como Netlify o GitHub Pages, con SSR necesitas un servidor de Node en un cloud provider como Amazon o Google. Existen alternativas gratuitas, pero tienen limitaciones claras.
¿Qué riesgos de seguridad y rendimiento introduce el SSR?
- Nuevo vector de ataque [02:12]: al tener un servidor expuesto, este puede ser objetivo de ataques si no se implementan buenas prácticas de seguridad, igual que con cualquier servidor backend.
- Routing más lento [02:26]: en una single page application (SPA) con client side rendering, el routing ocurre en el navegador tras cargar el archivo
index.js. Con SSR, es el servidor quien decide qué vista mostrar, lo que añade latencia en la navegación entre páginas.
- Incompatibilidad con APIs del navegador [02:46]: esta es quizá la desventaja principal. Cuando el servidor ejecuta el código, no tiene acceso a objetos como
window, document, localStorage o la API de caché. Intentar usarlos genera una excepción indicando que no están definidos en el contexto del servidor.
¿Qué es la rehidratación y por qué es importante?
El proceso de rehidratación [03:18] es clave para entender cómo conviven el servidor y el cliente en SSR. Cuando el servidor envía el primer HTML, lo hace de manera "seca": entrega los elementos del DOM pero sin interactividad. Después, cuando React toma el control en el navegador, ejecuta un proceso llamado rehidratación.
- React no recrea todo el DOM desde cero; reconoce el HTML ya existente.
- Solo agrega la capa de JavaScript necesaria para habilitar la interactividad.
- Esto optimiza el rendimiento porque evita trabajo redundante.
Para profundizar en cómo se mide el performance de cada tipo de renderizado —incluyendo métricas como los Core Web Vitals [03:58]— el recurso recomendado es web.dev, un sitio mantenido por expertos de Google que desarrollan herramientas como Lighthouse y las DevTools del navegador.
Si ya manejas estos conceptos, es momento de ponerlos en práctica. ¿Qué desventaja del SSR consideras más difícil de gestionar en un proyecto real? Comparte tu experiencia en los comentarios.
