javascript / intermediate
Snippet
Rein clientseitiges Laden von Komponenten mit next/dynamic
Einige Bibliotheken (z. B. solche, die auf window oder document zugreifen) können nicht auf dem Server ausgeführt werden. Die Verwendung von next/dynamic mit ssr: false stellt sicher, dass die Komponente nur auf der Client-Seite hydriert wird, was Hydrierungsfehler verhindert.
snippet.js
javascript
1
2
3
4
5
6
import dynamic from 'next/dynamic';const Chart = dynamic(() => import('./components/Chart'), {ssr: false,loading: () => <p>Loading Chart...</p>});
nextjs
Erklärung
1
ssr: false
Teilt Next.js explizit mit, nicht zu versuchen, diese Komponente auf dem Server zu rendern.
2
loading: () => ...
Definiert eine Fallback-UI, die angezeigt wird, während die dynamische Komponente heruntergeladen wird.