Criticar el rendimiento de un sitio web sin entender su propósito es un error común. Una página como open.spotify.com puede mostrar métricas negativas en herramientas como Lighthouse o Page Speed, pero eso no significa que esté mal construida. Todo depende del contexto, del objetivo de negocio y de la técnica de renderizado que se haya elegido de forma intencional. Comprender estas técnicas permite tomar decisiones informadas sobre qué optimizar y por qué.
¿Qué es el server side rendering y cómo funciona su flujo? [01:05]
El server side rendering (SSR) es la técnica de renderizado más antigua y una de las más utilizadas. Su nombre lo dice todo: el servidor es quien genera completamente el contenido HTML antes de enviarlo al navegador del usuario.
El flujo funciona así:
- El usuario ingresa una URL en el navegador.
- El servidor recibe esa petición y realiza consultas a bases de datos o APIs.
- Con los datos obtenidos, el servidor construye el HTML de forma dinámica.
- El HTML terminado se entrega al navegador y el usuario puede empezar a interactuar.
Un ejemplo claro es Facebook. Cuando abres tu timeline, el contenido que ves es completamente diferente al de cualquier otra persona. El servidor consulta tus gustos, tus likes y tu red de contactos para construir una página personalizada casi de forma inmediata [01:22]. Lo mismo ocurre con Twitter: cada timeline es único.
Entre la petición y la respuesta puede existir un tiempo de espera. La velocidad depende de qué tan optimizadas estén las APIs y las consultas a la base de datos. Empresas como Facebook han invertido enormemente en reducir ese tiempo al mínimo.
¿Cómo se implementa server side rendering con Node.js? [02:28]
El ejemplo práctico utiliza JavaScript con Node.js y la dependencia Express, un framework ligero para crear servidores. Sin embargo, la misma lógica aplica con otros lenguajes como Python, PHP o frameworks como Laravel.
El código funciona de la siguiente manera:
- Se establece una conexión a una API que simula una base de datos de productos.
- Se define un HTML como un string dentro del servidor.
- De forma dinámica, se genera el contenido iterando sobre los datos obtenidos.
- El servidor HTTP entrega ese HTML ya construido al navegador.
Para ejecutar el proyecto, basta con entrar a la carpeta correspondiente, correr npm install para instalar dependencias y luego npm run serve para levantar el servidor [03:55]. Al abrir el puerto indicado en el navegador, se visualiza la lista de productos con sus precios.
¿Cómo verificar que una página usa server side rendering? [05:06]
Un truco práctico: si abres el view page source del navegador y encuentras el contenido ya renderizado (sin necesidad de que JavaScript lo genere en el cliente), entonces se trata de SSR. No verás un for ni lógica de JavaScript, solo el resultado final del procesamiento.
Es importante no confundir esto con el inspector de elementos. El inspector muestra el DOM después de que JavaScript ha modificado la página. El view source muestra exactamente lo que el servidor entregó, lo cual es la forma más confiable de identificar esta técnica [06:52].
¿Por qué cada recarga genera contenido fresco? [05:30]
Cada vez que el usuario hace reload, el servidor repite todo el proceso: consulta la base de datos, obtiene los datos más recientes y reconstruye el HTML. Esto se demostró agregando productos nuevos mediante Postman [05:50]. Al crear un producto a través de la API y recargar la página, el nuevo elemento aparecía inmediatamente al final de la lista.
¿Por qué los e-commerce prefieren server side rendering? [07:10]
Esta técnica es especialmente popular en plataformas de comercio electrónico por dos razones fundamentales:
- Renderizado rápido y personalizado: cuando un vendedor publica un producto nuevo, este aparece de inmediato en la siguiente carga de página.
- Optimización para motores de búsqueda (SEO): al entregar HTML completo desde el servidor, buscadores como Google o Bing pueden indexar el contenido sin problemas.
Los sitios de noticias también se benefician de esta técnica, ya que necesitan que su contenido sea rastreable y esté disponible para los crawlers de los buscadores desde el primer momento.
Si trabajas en proyectos donde el SEO y la generación dinámica de contenido son prioritarios, el server side rendering sigue siendo una opción sólida y probada. ¿Has identificado qué técnica de renderizado usa tu proyecto actual?
