Cargar rutas pesadas en Next.js puede hacer que tu aplicación se sienta lenta y torpe.

El truco

// ANTES (mal)
import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, []);

  return <div>{data ? data.content : 'Cargando...'}</div>;
}

export default MyComponent;

// DESPUÉS (bien)
import { use } from 'next/router';

export default function MyOptimizedComponent({ data }) {
  return <div>{data.content}</div>;
}

export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return {
    props: { data },
  };
}

Usar getServerSideProps permite que el servidor pre-renderice la página con los datos ya cargados, lo que reduce significativamente el tiempo de carga al eliminar la necesidad de solicitar datos en la primera carga desde el cliente. Esto se traduce en una experiencia de usuario más rápida y fluida. El componente recibe los datos directamente como prop, lo que elimina la complejidad y la posible latencia de useEffect en el cliente.

En resumen, mover la carga de datos al servidor con getServerSideProps te permite aprovechar al máximo la arquitectura de Next.js para optimizar el rendimiento de tu aplicación.