What are the benefits of using dynamic imports in Next.js?

Question

Here is a code snippet for a dynamic import in a Next.js application:

```
// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Hello'));

export default function Home() {
  return <DynamicComponent />;
}
```
What is the main advantage of using dynamic imports in this context?

Accepted Answer

They allow components to be loaded only when they are needed, improving initial load performance.

Answer

They make the `DynamicComponent` component accessible to the Next.js Router API.

Answer

They allow data to be loaded from the server before the component is loaded.

Answer

They are required for all external components in Next.js.

Question from the Next.js test