Dynamic Imports (next/dynamic)

next/dynamic is Next.js’s wrapper around React.lazy and Suspense. It lets you defer loading a component’s JavaScript until it is actually needed, splitting it into its own bundle chunk. This shrinks the initial page payload and speeds up first load. Below, the chart widget’s code is only fetched when you click Load widget, and a loading fallback is shown while the chunk downloads. It also uses ssr: false so the component renders only in the browser.