الإدراج الديناميكي في 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 من توثيق Next.js الرسمي.