Next.js 56: next/dynamic — División de código
easy⏱ 5 mincoursenextjs
La misma idea, con extras solo de navegador
React.lazy(() => import(...)) devuelve un componente que se resuelve de forma asíncrona; envolverlo en Suspense fallback={...} muestra un placeholder mientras el código se descarga. next/dynamic envuelve exactamente este patrón y agrega ssr: false, que se salta por completo el renderizado en servidor para componentes que solo tienen sentido en un navegador (usan window, un canvas, una librería de mapas, etc.).
import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import("./HeavyChart"), {
ssr: false,
loading: () => <p>Loading chart...</p>,
});
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<HeavyChart />
</div>
);
}
Difiere un segundo widget
HeavyMapImpl ahora está envuelto en una llamada lazy(() => new Promise(...)) llamada HeavyMap — el mismo truco de import falso vía Promise usado para HeavyChart — y se renderiza dentro de su propio límite Suspense. Haz clic en 'Show map' y observa que aparece su propio fallback de carga antes que el mapa.
Tamaño del bundle vs velocidad percibida
Cada componente que difieres reduce el JavaScript que el navegador debe procesar antes de que tu página se vuelva interactiva. La contrapartida: la primera vez que se muestra un componente diferido, hay un breve estado de carga mientras su código se descarga. Para piezas pesadas de uso poco frecuente (editores de texto enriquecido, gráficos, mapas) esa contrapartida casi siempre vale la pena.