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

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

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

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

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

كيفية العمل

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

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

أثناء التقديم المسبق، سيكون كائن query الخاص بالموجه (router) فارغًا لأنه لا توجد معلومات query متاحة خلال هذه المرحلة. بعد التهيئة (hydration)، سيؤدي 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 غير محدد (undefined) للصفحات التي تم تقديمها مسبقًا.
• تجنب استخدام قيمة asPath في next/router في شجرة العرض حتى يصبح حقل isReady في الموجه true. تعرف الصفحات المحسنة بشكل ثابت على asPath فقط من جانب العميل وليس الخادم، لذا فإن استخدامها كخاصية (prop) قد يؤدي إلى أخطاء عدم تطابق. يوضح مثال active-class-name طريقة واحدة لاستخدام asPath كخاصية.