¿Qué es SSR?

SSR (Server-Side Rendering) es una técnica de renderizado donde el servidor genera el HTML completo de una página web antes de enviársela al navegador. En otras palabras, cuando un usuario solicita una página, el servidor procesa todos los datos, ejecuta el código necesario y devuelve una página HTML completamente formada que el navegador puede mostrar inmediatamente.

¿Para qué sirve SSR?

SSR es fundamental para mejorar la experiencia del usuario y el SEO. Te permite:

• Mejorar el tiempo de carga inicial de la página.
• Optimizar el SEO ya que los motores de búsqueda pueden indexar el contenido completo.
• Proporcionar mejor rendimiento en dispositivos con recursos limitados.
• Mostrar contenido instantáneamente sin esperar a que se ejecute JavaScript.
• Mejorar la accesibilidad para usuarios con JavaScript deshabilitado.

¿Cómo funciona?

Imagina SSR como un chef que prepara el plato completo en la cocina. En lugar de darte los ingredientes crudos (como en CSR), el servidor te entrega el plato completamente preparado y listo para consumir. El navegador solo necesita “servir” el HTML ya procesado, sin cocinar nada adicional.

Ejemplo: SSR con Next.js

Aquí tienes un ejemplo básico de cómo funciona SSR en Next.js:

// pages/blog/[id].js - Next.js
export async function getServerSideProps(context) {
  const { id } = context.params;
  
  // Obtener datos en el servidor
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  
  return {
    props: { post }
  };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

---

Este ejemplo muestra cómo Next.js obtiene los datos en el servidor usando getServerSideProps y renderiza el HTML completo antes de enviarlo al cliente.

Conceptos clave de SSR

• Hydration: Proceso donde el JavaScript se activa en el HTML ya renderizado.
• Time to First Byte (TTFB): Tiempo que tarda el servidor en enviar la respuesta.
• First Contentful Paint (FCP): Cuando el usuario ve el primer contenido.
• SEO-friendly: Los motores de búsqueda pueden indexar el contenido completo.
• Initial Load: La primera carga es más rápida que CSR.

¿Dónde encuentras SSR?

• En frameworks como Next.js, Nuxt.js, o SvelteKit.
• En aplicaciones que requieren SEO optimizado como blogs o e-commerce.
• En sitios web con mucho contenido dinámico.
• En aplicaciones que necesitan cargas iniciales rápidas.

Conclusión

SSR es una técnica poderosa que combina lo mejor del renderizado tradicional con las capacidades modernas de JavaScript. Es ideal para aplicaciones que priorizan el SEO, el rendimiento inicial y la experiencia del usuario. Elegir entre SSR, CSR o SSG depende de las necesidades específicas de tu proyecto.

---