From 6827b586f0e9b2b324a8d03d6e84ad871fe4935c Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 19 Dec 2022 22:38:30 +0100 Subject: [PATCH] docs: update next/dynamic docs (#44067) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- docs/advanced-features/dynamic-import.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index 1122ab5457d8..a7b4f5eac1ee 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -13,7 +13,7 @@ description: Dynamically import JavaScript modules and React Components and spli Next.js supports lazy loading external libraries with `import()` and React components with `next/dynamic`. Deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page. Components or libraries are only imported and included in the JavaScript bundle when they're used. -`next/dynamic` is an extension of [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy). When used in combination with [`Suspense`](https://reactjs.org/docs/react-api.html#reactsuspense), components can delay hydration until the Suspense boundary is resolved. +`next/dynamic` is a composite extension of [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) and [`Suspense`](https://reactjs.org/docs/react-api.html#reactsuspense), components can delay hydration until the Suspense boundary is resolved. ## Example @@ -21,18 +21,13 @@ By using `next/dynamic`, the header component will not be included in the page's ```jsx import dynamic from 'next/dynamic' -import { Suspense } from 'react' const DynamicHeader = dynamic(() => import('../components/header'), { - suspense: true, + loading: () => 'Loading...', }) export default function Home() { - return ( - - - - ) + return } ```