الإدراج الديناميكي في Next.js

تدعم Next.js إدراج الوحدات البرمجية ديناميكيًا ()import والعمل معها بما يتوافق مع معيار ES2020 للغة JavaScript، كما يعمل هذا الإدراج عند التصيير من جانب الخادم SSR.

ننجز في المثال التالي بحثًا ضبابيًا باستخدام الوحدة البرمجية fuse.js التي نحمّلها ديناميكيًا في المتصفح بعد أن يبدأ المستخدم في الكتابة ضمن مربع البحث:

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Max', '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>
  )
}

يمكن التفكير بالإدراج الديناميكي على أنه طريقة إلى تقسيم شيفرتك إلى أجزاء يمكن التحكم بها. وتستطيع من خلاله أن تدرج أيضًا مكوّنات React، لكن عليك في هذه الحالة استخدامه بالاشتراك مع next/dynamic للتأكد من عمله كأي مكوّن React آخر، وسنرى لاحقًا في هذه الصفحة تفاصيل أكثر عن هذا الموضوع.

الاستخدامات الرئيسية

ستُحمَّل الوحدة البرمجية ؤ ديناميكيًا في الصفحة في المثال التالي:

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

يُعاد المكوّن DynamicComponent افتراضيًا من قبل الوحدة ../components/hello، ويعمل كمكوّن React نمطي،إذ يمكنكك تمرير الخاصيات إليه بشكل اعتيادي.

ملاحظة: يجب أن يُكتب المسار import('path/to/component') إلى الوحدة البرمجية صراحة، ولا يجوز أن يكون قالب نصي أو متغير. كما ينبغي أن تكون الدالة ()import ضمن الاستدعاء ()dynamic كي تتمكن من مطابقة معرّفات وحدات أو تجمّعات webpack إلى الاستدعاء ()dynamic وإعادة تحميلها قبل التصيير. فمن غير الممكن استخدام ()dynamic داخل شيفرة تصيير React، بل ينبغي أن تُذكر في أعلى مستوى للوحدة للبرمجية حتى يُعاد تحميل الوحدة، كما هو الحال مع React.lazy.

الاستخدام مع الدوال المُصدَّرة المسماة

يمكنك استخدام التصدير المُسمّى أيضًا إن لم يُصدّر المكوّن الديناميكي افتراضيًا. لنتأمل الوحدة components/hello.js/.. التي تصدّر الدالة المسمّاة Hello:

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

ولإدراج المكوّن Hello ديناميكيًا، يمكنك إعادته من وعد Promise تُعيده الدالة ()import كالتالي:

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

الاستخدام مع مكوّن تحميل مخصص

يمكن إضافة مكوّن تحميل اختياري loading لتصيير حالة التحميل أثناء تحميل المكوّن الديناميكي. إليك مثالًا:

import dynamic from 'next/dynamic'

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

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

export default Home

الاستخدام دون تصيير من جانب الخادم

قد لا ترغب دائمًا بإدراج وحدة برمجية من جانب الخادم، كأن تستخدم مكتبة تعمل على المتصفح فقط. ألق نظرة على المثال التالي:

import dynamic from 'next/dynamic'

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

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

export default Home

الاستخدام مع الخيار suspense

يتيح لك هذا الخيار suspense التحميل الكسول للمكوّن كما هو الحال مع React.lazy و <Suspense> في النسخة 18 من React. يعمل هذا الخيار في كلا الواجهتين باستخدام خيار التراجع fallback فقط. لم يُدعم التصيير من جانب الخادم بشكل كامل، والعمل جارٍ على تطويره.

import dynamic from 'next/dynamic'

const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
  suspense: true,
})

function Home() {
  return (
    <div>
      <Suspense fallback={`loading`}>
        <DynamicLazyComponent />
      </Suspense>
    </div>
  )
}

المصادر

الصفحة Dynamic Import من توثيق Next.js الرسمي.