> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/next-js/working-with-server-side-rendering.md).

# Dynamic imports

Next.js supports ES2020 dynamic import() for JavaScript. With it, you can import JavaScript modules dynamically and work with them. They also work with server-side rendering.

For example, you could load the module dynamically in the browser **only** after the user types in the search input or you just need to **skip rendering** some component **on the** **server** because it depends on the DOM API or client-side data.

 Next.js supports dynamic imports that, when used with components, will opt out of server-side rendering. For example, if you inspect the output of the actual HTML page, you won't see the *SponsoredAd* component in the page source, although you can see it in the page visualization. Note: server-side rendering is false `{ ssr: false }`

```jsx
import dynamic from 'next/dynamic'

const SponsoredAd = dynamic(
  () => import('../components/sponsoredAd'),
  { ssr: false }
)

const Page = () => (
  <div>
    <h1>This will be prerendered</h1>

    {/* this won't*/}
    <SponsoredAd />
  </div>
)

export default Page
```

&#x20;In the following example, the module `../components/hello` will be dynamically loaded by the page:

```jsx
import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
```

If the dynamic component is not the default export, you can use a named export too.

```jsx
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
```

&#x20;An optional `loading` component can be added:

```jsx
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)
```