next/dynamic – Încărcarea leneșă a componentelor grele (Lazy Loading) în Next.js

import dynamic from 'next/dynamic';

const EditorText = dynamic(() => import('@/components/Editor'), {
  ssr: False,
  loading: () => <p>Se încarcă editorul...</p>
});

Ce face next/dynamic - Încărcarea leneșă a componentelor grele (Lazy Loading)

Librăriile complexe (precum editoare WYSIWYG, hărți interactive Leaflet/Google Maps, grafice Chart.js) au dimensiuni uriașe (sute de KB) și pot depinde de obiecte exclusive de browser (`window`).

Funcția dynamic() separă componenta din pachetul inițial și o descarcă doar atunci când este efectiv randată în ecran.

Opțiunea ssr: False dezactivează randarea pe server pentru componente care nu pot rula în Node.js.

Exemple

Exemplul 1: Încărcarea unei hărți interactive care necesită obiectul window

Ocolește eroarea ‘window is not defined’ la randarea pe server.

import dynamic from 'next/dynamic';

const HartaLocatii = dynamic(
  () => import('@/components/HartaInteractiva'),
  {
    ssr: False,
    loading: () => <div className="h-64 bg-gray-100 animate-pulse">Se încarcă harta...</div>
  }
);

export default function Contact() {
  return <HartaLocatii />;
}

Ieșire în terminal

Harta este descărcată și inițializată doar pe client.

Greșeli frecvente

• Apelarea `dynamic()` în interiorul funcției de randare a unei componente; dynamic() trebuie definit obligatoriu la nivelul de modul (top-level scope).

Comenzi înrudite

• @next/bundle-analyzer - Vizualizarea și optimizarea dimensiunii pachetelor JS: Generează o hartă vizuală interactivă cu toate librăriile incluse în pachetele JavaScript finale pentru a identifica dependențele grele.
• app/loading.tsx - Stări de încărcare instantanee (React Suspense): Afișează automat un ecran schelet (skeleton UI) sau indicator de progres în timp ce datele paginii sunt descărcate pe server.