Next.js SSR: Mejora la Carga Inicial con getServerSideProps

¿Notas que tus páginas en Next.js tardan en mostrar contenido dinámico? Puede que estés intentando cargar datos en el cliente cuando podrías hacerlo del lado del servidor.

El truco

// Antes
export default function MiPagina() {
  const [datos, setDatos] = useState(null);
  
  useEffect(() => {
    fetch('/api/datos')
      .then(res => res.json())
      .then(data => setDatos(data));
  }, []);
  
  if (!datos) return <p>Cargando...</p>;

  return <div>{datos.contenido}</div>;
}

// Después
export async function getServerSideProps() {
  const res = await fetch('https://api.midominio.com/datos');
  const datos = await res.json();
  
  return { props: { datos } };
}

export default function MiPagina({ datos }) {
  return <div>{datos.contenido}</div>;
}

Pasar de useEffect a getServerSideProps mejora la carga inicial porque el fetching de datos se realiza en el servidor antes de que la página se entregue al cliente. Esto reduce el tiempo de espera para que la página esté completamente renderizada, eliminando el estado de “Cargando…” y proporcionando contenido inmediato al usuario. Además, getServerSideProps se ejecuta en cada request, asegurando que los datos estén siempre actualizados.

Transforma tus aplicaciones Next.js usando SSR para mejorar la experiencia del usuario y optimizar el tiempo de carga inicial.