Next.js · Junior · Question 39 of 75

How do you lazy-load a heavy client component in Next.js?

✓Correct answer: With next/dynamic (or React.lazy + Suspense)
2With a lazy attribute on the component in JSX
3With import inside useEffect, storing it in state

Explanation

const Chart = dynamic(() => import('./Chart')) moves the code into a separate chunk and lets you specify loading. The ssr: false option disables server rendering but can be used only in client components. Server components don't end up in the bundle anyway.

How do you lazy-load a heavy client component in Next.js?

Explanation

Further reading

Problem with a question

Test yourself