Next.js/automatic static optimization

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

تتيح ميزة التحسين الساكن التلقائي في Next.js نشر تطبيقات هجينة تتضمن صفحات تُصيَّر من ناحية الخادم وأخرى توّلد بشكل ساكن. ومن أهم منافع هذه الميزة أن الصفحات المحسّنة لن تحتاج أية حسابات من ناحية الخادم وبالإمكان نقلها مباشرة إلى المستخدم النهائي من عدة مواقع لشبكة توزيع المحتوى . وستكون النتيجة سرعة تحميل عالية جدًا تحّن من تجربة مستخدميك.

ملاحظة: ستبقى الصفحات الموّلدة بشكل ساكن تفاعلية لأن Next.js سترطب التطبيق من جانب العميل لمنحه القدرة الكاملة على التفاعل مع المستخدم.

كيف تعمل ميزة التحسين الساكن في Next.js

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

سيكون الكائن query الخاص بالموّجهة فارغًا خلال مرحلة التصيير المسبق لعدم وجود معلومات ندفعها إلى الكائن خلال هذه المرحلة. لكن ما يحدث بعد الترطيب، أن Next.js ستسبب تحديث التطبيق لتأمين معاملات المسار التي يضمها الكائن query. سيُحدَّث الكائن query بعد أن يسبب الترطيب حدوث تصيير آخر في الحالات الآتية:

• الصفحة عبارة عن وجهة ديناميكية.
• تضم الصفحة قيم استعلام في عنوان URL.
• تهيئة الإعداد Rewrites في ملف 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

التحفظات على ميزة التحسين الساكن في Next.js

• إن كان لديك تطبيق مخصص يستخدم الدالة getInitialProps، فسيُعطًّل التحسين في الصفحات التي لا تدعم التوليد الساكن.
• إن كان لديك مستند مخصص يستخدم الدالة getInitialProps، تأكد من قيمة ctx.req قبل أن تفترض أن الصفحة ستُصيَّر من جانب الخادم. إذ يأخذ الخيار ctx.req القيمة undefined للصفحات التي تُصيّر مسبقًا.

المصادر

• الصفحة Automatic Static Optimization من توثيق Next.js الرسمي.