بارگذاری تنبل کامپوننت‌ها و کتابخانه‌ها در Next.js – بهینه‌سازی عملکرد با Dynamic Imports و Suspense

مقدمه

بارگذاری تنبل (Lazy Loading) در Next.js به شما اجازه می‌دهد کامپوننت‌ها و کتابخانه‌ها را فقط زمانی که نیاز است بارگذاری کنید. این کار باعث کاهش حجم اولیه bundle و بهبود سرعت بارگذاری صفحات می‌شود.

روش‌های بارگذاری تنبل

• استفاده از next/dynamic: ترکیبی از React.lazy و Suspense با پشتیبانی از SSR
• استفاده از React.lazy و Suspense: مناسب برای Client Components

مثال: بارگذاری کامپوننت‌های کلاینت

'use client'
import { useState } from 'react'
import dynamic from 'next/dynamic'

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>
      <ComponentA />
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>
      <ComponentC />
    </div>
  )
}

غیرفعال کردن SSR برای کامپوننت‌های کلاینت

برای جلوگیری از prerender شدن کامپوننت در سرور:

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

بارگذاری کامپوننت‌های سرور

در صورت import تنبل کامپوننت سرور، فقط کامپوننت‌های کلاینت داخل آن به‌صورت تنبل بارگذاری می‌شوند. گزینه ssr: false در کامپوننت‌های سرور پشتیبانی نمی‌شود.

const ServerComponent = dynamic(() => import('../components/ServerComponent'))

export default function ServerComponentExample() {
  return <ServerComponent />
}

بارگذاری کتابخانه‌های خارجی

برای بارگذاری کتابخانه‌ها به‌صورت تنبل، از import() استفاده کنید:

'use client'
import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <input
      type="text"
      placeholder="Search"
      onChange={async (e) => {
        const Fuse = (await import('fuse.js')).default
        const fuse = new Fuse(names)
        setResults(fuse.search(e.currentTarget.value))
      }}
    />
  )
}

افزودن کامپوننت بارگذاری سفارشی

'use client'
import dynamic from 'next/dynamic'

const WithCustomLoading = dynamic(() => import('../components/WithCustomLoading'), {
  loading: () => <p>Loading...</p>,
})

export default function Page() {
  return <WithCustomLoading />
}

بارگذاری تنبل exportهای نام‌گذاری‌شده

برای import تنبل یک export نام‌گذاری‌شده:

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

جمع‌بندی

بارگذاری تنبل در Next.js ابزار قدرتمندی برای بهینه‌سازی عملکرد و کاهش حجم اولیه صفحات است. با استفاده از dynamic imports، مدیریت SSR، و بارگذاری کتابخانه‌ها در زمان نیاز، می‌توانید تجربه‌ای سریع و واکنش‌گرا برای کاربران فراهم کنید.