Next.jsPytanie 11 z 15
Jak użyć dynamic import do opóźnionego ładowania komponentu?
Najpierw odpowiedz na głos lub w myślach, potem porównaj.
Odpowiedź
Dla komponentów można użyć next/dynamic, a dla zwykłego modułu — import() zwracającego Promise.
JSX
'use client';
import dynamic from 'next/dynamic';
import { useState } from 'react';
const Editor = dynamic(() => import('./Editor'), {
loading: () => <p>Ładowanie edytora…</p>,
});
export default function Page() {
const [open, setOpen] = useState(false);
return <>
<button onClick={() => setOpen(true)}>Edytuj</button>
{open && <Editor />}
</>;
}Pułapka: ssr: false wyłącza prerendering danego komponentu; stosuję je celowo np. przy bibliotece zależnej od przeglądarki. W App Routerze ta opcja należy do Client Component, nie Server Component.
Jak poszło? Bądź szczery — „Jeszcze nie” dodaje pytanie do powtórki.