التحسين التلقائي للصفحات الثابتة

يحدد Next.js تلقائيًا أن الصفحة ثابتة (يمكن تقديمها مسبقًا) إذا لم يكن لديها متطلبات بيانات تعيق التحميل. يتم هذا التحديد من خلال غياب getServerSideProps و getInitialProps في الصفحة.

تتيح هذه الميزة لـ Next.js إنشاء تطبيقات هجينة تحتوي على صفحات يتم عرضها من جانب الخادم وصفحات يتم توليدها ثابتًا.

الصفحات المولدة ثابتًا تظل تفاعلية: سيقوم Next.js بتهيئة التطبيق من جانب العميل لمنحه التفاعل الكامل.

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

كيفية العمل

إذا كان getServerSideProps أو getInitialProps موجودًا في الصفحة، سيتحول Next.js إلى عرض الصفحة عند الطلب، لكل طلب (أي عرض من جانب الخادم (Server-Side Rendering)).

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

أثناء التقديم المسبق، سيكون كائن query الخاص بالموجه فارغًا لأننا لا نملك معلومات query لتوفيرها خلال هذه المرحلة. بعد التهيئة، سيؤدي Next.js تحديثًا لتطبيقك لتوفير معلمات المسار في كائن query.

الحالات التي سيتم فيها تحديث الاستعلام بعد التهيئة مما يؤدي إلى عرض آخر هي:

• الصفحة تحتوي على مسار ديناميكي (dynamic route).
• الصفحة تحتوي على قيم استعلام في URL.
• تم تكوين إعادة التوجيه (Rewrites) في ملف next.config.js حيث يمكن أن تحتوي هذه على معلمات قد تحتاج إلى تحليلها وتوفيرها في query.

للتمييز ما إذا كان الاستعلام محدثًا بالكامل وجاهزًا للاستخدام، يمكنك الاستفادة من الحقل isReady في next/router.

معلومة مفيدة: المعلمات المضافة باستخدام المسارات الديناميكية (dynamic routes) إلى صفحة تستخدم getStaticProps ستكون دائمًا متاحة داخل كائن query.

سيقوم next build بإصدار ملفات .html للصفحات المحسنة ثابتًا. على سبيل المثال، ستكون نتيجة الصفحة pages/about.js:

.next/server/pages/about.html

وإذا أضفت getServerSideProps إلى الصفحة، فستصبح JavaScript، كما يلي:

.next/server/pages/about.js

محاذير

• إذا كان لديك تطبيق مخصص (App) مع getInitialProps، فسيتم إيقاف هذا التحسين في الصفحات بدون توليد ثابت (Static Generation).
• إذا كان لديك وثيقة مخصصة (Document) مع getInitialProps، فتأكد من التحقق مما إذا كان ctx.req محددًا قبل افتراض أن الصفحة يتم عرضها من جانب الخادم. سيكون ctx.req غير محدد للصفحات التي يتم تقديمها مسبقًا.
• تجنب استخدام قيمة asPath في next/router في شجرة العرض حتى يصبح حقل isReady في الموجه true. تعرف الصفحات المحسنة ثابتًا على asPath فقط من جانب العميل وليس الخادم، لذا فإن استخدامها كخاصية قد يؤدي إلى أخطاء عدم تطابق. يوضح مثال active-class-name طريقة واحدة لاستخدام asPath كخاصية.