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

تدعم Next.js الإدراج الكسول أو المتأني للمكتبات الخارجية عبر import()‎ وللمكونات React عبر next/dynamic إذ يساعد التحميل المؤجل أو المتأني على تحسين أداء التطبيق عند تحميله أول مرة وذلك بتقليل شيفرة JavaScript الضروري لعرض الصفحات، أما المكتبات أو المكونات المؤجلة، فستُحمل وتضاف في حزمة JavaScript المُجمعة عند الحاجة إليها فقط.

المكون next/dynamic هو توسيع للمكون React.lazy والمكون Suspense، وتستطيع المكونات تأخير عملية الترطيب حتى ينتهي التعليق Suspense.

مثال

في المثال التالي، استخدام next/dynamic يمنع من إضافة مكون الرأس header في حزمة JavaScript الأولية المجمعة للصفحة، وستعرض الصفحة التعليق Suspense أولًا ثم ستعرض المكون Header عندما يُحمل ويصبح جاهزًا.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => 'Loading...',
})

export default function Home() {
  return <DynamicHeader />
}

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

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

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

// components/hello.js
export function Hello() {
  return <p>Hello!</p>
}

// pages/index.js
import dynamic from 'next/dynamic'

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

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

لتحميل مكون ديناميكيًا من طرف العميل، تستطيع استخدام الخيار ssr لتعطيل التصير من طرف الخادم، وهذا مفيد في الحالات التي يعتمد فيها مكون أو مكتبة على إحدى واجهات المتصفح browser API مثل window:

import dynamic from 'next/dynamic'

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

الاستخدام مع مكتبات خارجية

يستخدم المثال التالي المكتبة الخارجية fuse.js للبحث، وستُحمل المكتبة فقط في المتصفح عندما يبدأ المُستخدم الكتابة في حقل البحث:

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>
  )
}

أمثلة

Dynamic Import

المصادر

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