El server-side rendering con React.js cambia la forma en la que entregas aplicaciones web al navegador, porque tu código ya no vive solo en el cliente: también corre en el servidor. Si trabajas con frameworks modernos de JavaScript, dominar este patrón te abre la puerta a proyectos más rápidos, escalables y compatibles con SEO.

Enrique Debars, front-end developer en el equipo de ingeniería de Platzi, guía un recorrido práctico para construir desde cero un motor propio de renderizado: el Platzi Engine.

¿Por qué aprender server-side rendering hoy?

La mayoría del ecosistema front-end actual usa este patrón. Frameworks como Next.js, SvelteKit, Angular, Gatsby.js y Remix lo soportan, y Node.js es la base que lo hace posible.

¿Qué es el server-side rendering? Es un patrón donde tu aplicación se renderiza primero en el servidor y luego se entrega lista al navegador, en lugar de construirse completamente en el cliente.

Esto cambia tu modelo mental como desarrollador. Ya no piensas únicamente en el navegador: ahora también piensas en el servidor, con sus propias reglas y limitaciones.

¿En qué se diferencia del client-side rendering?

Existen varias formas de entregar aplicaciones web, y conviene tenerlas claras antes de elegir una:

• Client-side rendering: el navegador construye toda la interfaz con JavaScript.
• Server-side rendering: el servidor genera el HTML inicial y lo manda listo al navegador.
• Incremental side rendering: combina renderizado por partes según se necesite.

Después de elegir un enfoque, el siguiente paso es entender qué restricciones impone trabajar en el servidor.

¿Qué cambia cuando renderizas en el servidor?

En el servidor no existen objetos del navegador como window o document. Esa ausencia obliga a replantear cómo escribes componentes, cómo accedes a APIs del cliente y cómo manejas eventos.

¿Por qué no funciona window en el servidor? Porque window pertenece al entorno del navegador. El servidor corre en Node.js, que no tiene DOM ni acceso directo a APIs del cliente.

Estas restricciones, lejos de ser un obstáculo, son la base para diseñar aplicaciones híbridas que aprovechan lo mejor de ambos mundos.

¿Qué construirás con el Platzi Engine?

El proyecto central es Platzi Engine, un motor de server-side rendering que se construye paso a paso. Vas a generar un template, añadir dependencias para renderizar y configurar TypeScript en el servidor para entregar la aplicación final al navegador.

El recorrido incluye temas concretos como:

• Crear un bundle con Webpack 5.
• Configurar TypeScript con tipos básicos para robustecer la app.
• Renderizar componentes de React desde el servidor.
• Entender los constraints propios del entorno de servidor.

No se usan funciones avanzadas de TypeScript como constructores o decoradores. La idea es mantener el foco en los tipos esenciales que aportan robustez sin complicar el aprendizaje.

¿Qué necesitas saber antes de empezar?

Este no es un contenido para principiantes. Conviene llegar con bases sólidas en estas áreas:

• Fundamentos de HTML, CSS y JavaScript.
• Nociones de React.
• Cómo crear un bundle con Webpack 5.
• Fundamentos de Node.js.
• Conocimiento básico de TypeScript.

Si alguno de estos puntos te queda flojo, refuérzalo antes de avanzar. Te ahorrará fricciones cuando empieces a configurar el motor.

¿Cómo resolver dudas durante el camino?

Enrique responde preguntas directamente en la plataforma de Platzi. Si necesitas una respuesta más rápida, puedes buscarlo en Twitter como @codebars, siempre con preguntas públicas, ya que los mensajes directos suelen perderse.

¿Dónde pregunto si me trabo en una clase? Primero en la sección de preguntas de Platzi. Para urgencias, en Twitter como @codebars y siempre de forma pública.

La siguiente parada es entender los constraints del server-side rendering y el papel que juegan las SPAs (Single Page Applications) en el origen de esta necesidad. Ahí empieza a tomar forma el porqué de todo este enfoque.

¿Ya tienes claro qué te llevó a buscar SSR? Cuéntalo en los comentarios y comparte qué framework usas hoy.