javascript / intermediate
Snippet
Client-Side Only Component Loading with next/dynamic
Some libraries (like those accessing window or document) cannot run on the server. Using next/dynamic with ssr: false ensures the component is only hydrated on the client side, preventing hydration mismatch errors.
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
Breakdown
1
ssr: false
Explicitly tells Next.js not to attempt rendering this component on the server.
2
loading: () => ...
Defines a fallback UI to display while the dynamic component is being downloaded.