---
title: Lazy Loading
description: "Lazy load imported libraries and React Components to improve your application's loading performance."
url: "https://nextjs.org/docs/14/app/building-your-application/optimizing/lazy-loading"
version: 14.2.35
lastUpdated: 2024-01-05
prerequisites:
  - "Building Your Application: /docs/14/app/building-your-application"
  - "Optimizing: /docs/14/app/building-your-application/optimizing"
---


[Lazy loading](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading) in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.

It allows you to defer loading of **Client Components** and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.

There are two ways you can implement lazy loading in Next.js:

1. Using [Dynamic Imports](#nextdynamic) with `next/dynamic`
2. Using [`React.lazy()`](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense)

By default, Server Components are automatically [code split](https://developer.mozilla.org/docs/Glossary/Code_splitting), and you can use [streaming](/docs/app/building-your-application/routing/loading-ui-and-streaming) to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.

## `next/dynamic`

`next/dynamic` is a composite of [`React.lazy()`](https://react.dev/reference/react/lazy) and [Suspense](https://react.dev/reference/react/Suspense). It behaves the same way in the `app` and `pages` directories to allow for incremental migration.

## Examples
---

For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)