التصيير الجزئي المسبق (Partial Prerendering)

حتى الآن، تعلمت عن التصيير الثابت والديناميكي، وكيفية بث المحتوى الديناميكي الذي يعتمد على البيانات. في هذا الفصل، لنتعلم كيفية الجمع بين التصيير الثابت، والديناميكي، والبث في نفس المسار باستخدام التصيير الجزئي المسبق (PPR).

التصيير الجزئي المسبق هو ميزة تجريبية تم تقديمها في Next.js 14. قد يتم تحديث محتوى هذه الصفحة مع تقدم الميزة في الاستقرار. PPR متاح فقط مع إصدارات Next.js التجريبية (canary) (next@canary)، وليس في النسخة المستقرة من Next.js. لا نوصي بعد باستخدام التصيير الجزئي المسبق في الإنتاج.

لتثبيت الإصدار التجريبي من Next.js، قم بتشغيل:

pnpm install next@canary

المسارات الثابتة مقابل الديناميكية

بالنسبة لمعظم تطبيقات الويب التي يتم بناؤها اليوم، يمكنك الاختيار بين التصيير الثابت والديناميكي إما لـ تطبيقك بالكامل، أو لـ مسار معين. وفي Next.js، إذا استدعيت وظيفة ديناميكية في مسار (مثل استعلام قاعدة البيانات)، يصبح المسار كله ديناميكيًا.

ومع ذلك، فإن معظم المسارات ليست ثابتة أو ديناميكية بالكامل. على سبيل المثال، ضع في اعتبارك موقع تجارة إلكترونية. قد ترغب في تصيير معظم صفحة معلومات المنتج بشكل ثابت، ولكن قد ترغب في جلب سلة المستخدم والمنتجات الموصى بها بشكل ديناميكي، مما يسمح لك بعرض محتوى مخصص للمستخدمين.

بالعودة إلى صفحة لوحة التحكم الخاصة بك، ما هي المكونات التي تعتبرها ثابتة مقابل الديناميكية؟

عندما تكون جاهزًا، انقر فوق الزر أدناه لمعرفة كيف يمكننا تقسيم مسار لوحة التحكم:

ما هو التصيير الجزئي المسبق؟

قدمت Next.js 14 نسخة تجريبية من التصيير الجزئي المسبق (PPR) – نموذج تصيير جديد يسمح لك بدمج فوائد التصيير الثابت والديناميكي في نفس المسار. على سبيل المثال:

عندما يزور المستخدم مسارًا:

• يتم تقديم هيكل مسار ثابت يتضمن شريط التنقل ومعلومات المنتج، مما يضمن تحميلًا أوليًا سريعًا.
• يترك الهيكل فراغات حيث سيتم تحميل المحتوى الديناميكي مثل السلة والمنتجات الموصى بها بشكل غير متزامن.
• يتم بث الفراغات غير المتزامنة بالتوازي، مما يقلل من وقت التحميل الإجمالي للصفحة.

كيف يعمل التصيير الجزئي المسبق؟

يستخدم التصيير الجزئي المسبق Suspense من React (الذي تعلمت عنه في الفصل السابق) لتأجيل تصيير أجزاء من تطبيقك حتى يتم استيفاء شرط معين (مثل تحميل البيانات).

يتم تضمين الاحتياطي (fallback) لـ Suspense في ملف HTML الأولي جنبًا إلى جنب مع المحتوى الثابت. في وقت البناء (أو أثناء إعادة التحقق)، يتم تصيير المحتوى الثابت مسبقًا لإنشاء هيكل ثابت. يتم تأجيل تصيير المحتوى الديناميكي حتى يطلب المستخدم المسار.

إن تغليف مكون في Suspense لا يجعل المكون نفسه ديناميكيًا، ولكن يتم استخدام Suspense كحد بين الكود الثابت والديناميكي الخاص بك.

دعونا نرى كيف يمكنك تنفيذ PPR في مسار لوحة التحكم الخاصة بك.

تنفيذ التصيير الجزئي المسبق

قم بتمكين PPR لتطبيق Next.js الخاص بك عن طريق إضافة خيار ppr إلى ملف next.config.ts:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

تسمح لك القيمة 'incremental' بتبني PPR لمسارات محددة.

بعد ذلك، أضف خيار تكوين القطعة experimental_ppr إلى تخطيط لوحة التحكم الخاصة بك:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

هذا كل شيء. قد لا ترى فرقًا في تطبيقك أثناء التطوير، ولكن يجب أن تلاحظ تحسنًا في الأداء في الإنتاج. سيقوم Next.js بتصيير الأجزاء الثابتة من مسارك وتأجيل الأجزاء الديناميكية حتى يطلبها المستخدم.

الشيء الرائع في التصيير الجزئي المسبق هو أنك لست بحاجة إلى تغيير الكود الخاص بك لاستخدامه. طالما كنت تستخدم Suspense لتغليف الأجزاء الديناميكية من مسارك، سيعرف Next.js أي أجزاء من مسارك ثابتة وأيها ديناميكية.

نعتقد أن PPR لديه القدرة على أن يصبح نموذج التصيير الافتراضي لتطبيقات الويب، حيث يجمع بين أفضل ما في مواقع التصيير الثابت والديناميكي. ومع ذلك، لا يزال تجريبيًا. نأمل في استقراره في المستقبل وجعله الطريقة الافتراضية للبناء باستخدام Next.js.

يمكنك الآن التراجع عن هذه التغييرات والمتابعة إلى الفصل التالي.

ملخص

لتلخيص ما سبق، لقد قمت بعدة أشياء لتحسين جلب البيانات في تطبيقك حتى الآن:

1. إنشاء قاعدة بيانات في نفس منطقة كود التطبيق الخاص بك لتقليل زمن الانتقال بين الخادم وقاعدة البيانات.
2. جلب البيانات على الخادم باستخدام مكونات خادم React. هذا يسمح لك بالاحتفاظ بطلبات البيانات المنطقية والمكلفة على الخادم، ويقلل من حزمة JavaScript على جانب العميل، ويمنع أسرار قاعدة البيانات من التعرض للعميل.
3. استخدام SQL لجلب البيانات التي تحتاجها فقط، مما يقلل من كمية البيانات المنقولة لكل طلب وكمية JavaScript المطلوبة لتحويل البيانات في الذاكرة.
4. موازاة جلب البيانات مع JavaScript - حيث كان من المنطقي القيام بذلك.
5. تنفيذ البث لمنع طلبات البيانات البطيئة من حظر صفحتك بالكامل، والسماح للمستخدم بالبدء في التفاعل مع واجهة المستخدم دون انتظار تحميل كل شيء.
6. نقل جلب البيانات إلى المكونات التي تحتاجها، وبالتالي عزل الأجزاء التي يجب أن تكون ديناميكية في مساراتك.

في الفصل التالي، سننظر إلى نمطين شائعين قد تحتاج إلى تنفيذهما عند جلب البيانات: البحث والترقيم.