بارگیری تنبل Lazy load

'use client'
 
import { useState } from 'react'
import dynamic from 'next/dynamic'
 
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
 
export default function ClientComponentExample() {
	const [showMore, setShowMore] = useState(false)
 
	return (
		<div>
			{/* Load immediately, but in a separate client bundle */}
			<ComponentA />
 
			{/* Load on demand, only when/if the condition is met */}
			{showMore && <ComponentB />}
			<button onClick={() => setShowMore(!showMore)}>Toggle</button>
 
			{/* Load only on the client side */}
			<ComponentC />
		</div>
	)
}

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

import dynamic from 'next/dynamic'
 
// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'))
 
export default function ServerComponentExample() {
	return (
		<div>
			<ServerComponent />
		</div>
	)
}

'use client'
 
import { useState } from 'react'
 
const names = ['Tim', 'Joe', 'Bel', 'Lee']
 
export default function Page() {
	const [results, setResults] = useState()
 
	return (
		<div>
			<input
				type="text"
				placeholder="Search"
				onChange={async (e) => {
					const { value } = e.currentTarget
					// Dynamically load fuse.js
					const Fuse = (await import('fuse.js')).default
					const fuse = new Fuse(names)
 
					setResults(fuse.search(value))
				}}
			/>
			<pre>Results: {JSON.stringify(results, null, 2)}</pre>
		</div>
	)
}

import dynamic from 'next/dynamic'
 
const WithCustomLoading = dynamic(
	() => import('../components/WithCustomLoading'),
	{
		loading: () => <p>Loading...</p>,
	}
)
 
export default function Page() {
	return (
		<div>
			{/* The loading component will be rendered while  <WithCustomLoading/> is loading */}
			<WithCustomLoading />
		</div>
	)
}

'use client'
 
export function Hello() {
	return <p>Hello!</p>
}

import dynamic from 'next/dynamic'
 
const ClientComponent = dynamic(() =>
	import('../components/hello').then((mod) => mod.Hello)
)