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

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

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

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

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

كيفية العمل

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

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

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

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

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

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

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

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

.next/server/pages/about.html

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

.next/server/pages/about.js

محاذير

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