Next.js: apps fullstack

SSR vs CSR: ¿cuándo usar cada uno?

Next.js te permite elegir la estrategia de renderizado más adecuada para cada página dentro del mismo proyecto. Esta flexibilidad es su principal ventaja sobre React puro.

Client-Side Rendering (CSR)

El HTML llega vacío al navegador y JavaScript renderiza el contenido. Ideal para dashboards privados o páginas altamente interactivas.

// Componente cliente: marcado con "use client"
"use client";
import { useState, useEffect } from "react";

export default function Dashboard() {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    fetch("/api/estadisticas")
      .then(r => r.json())
      .then(setDatos);
  }, []);

  if (!datos) return <p>Cargando...</p>;
  return <div>Total usuarios: {datos.total}</div>;
}

Server-Side Rendering (SSR)

El HTML se genera en el servidor en cada petición. El cliente recibe HTML ya renderizado, lo que mejora el SEO y el tiempo de primera pintura.

// Componente servidor (por defecto en App Router)
// No necesita "use client"
async function obtenerUsuario(id: string) {
  const res = await fetch(`https://api.ejemplo.com/usuarios/${id}`, {
    cache: "no-store", // no cachear: siempre datos frescos
  });
  if (!res.ok) return null;
  return res.json();
}

export default async function PerfilPage({ params }: { params: { id: string } }) {
  const usuario = await obtenerUsuario(params.id);
  if (!usuario) return <p>Usuario no encontrado</p>;

  return (
    <main>
      <h1>{usuario.nombre}</h1>
      <p>{usuario.email}</p>
    </main>
  );
}