الفرق بين المراجعتين لصفحة: «Next.js/automatic static optimization»

من موسوعة حسوب
مرئينص الويكي
أنشأ الصفحة ب' = التحسين الساكن التلقائي في Next.js = تقرر Next.js أن الصفحة ساكنة (أي يمكن تصييرها مسبقًا) إن لم يتط...'
 
طلا ملخص تعديل
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التحسين الساكن التلقائي في Next.js}}</noinclude>
= التحسين الساكن التلقائي في Next.js =
تقرر Next.js أن الصفحة ساكنة (أي يمكن تصييرها مسبقًا) إن لم يتطلب تصييرها معلومات محجوبة عنها، وذلك بخلو شيفرتها من الدالتين <code>getServerSideProps</code> و <code>getInitialProps</code>.
تقرر Next.js أن الصفحة ساكنة (أي يمكن تصييرها مسبقًا) إن لم يتطلب تصييرها معلومات محجوبة عنها، وذلك بخلو شيفرتها من الدالتين <code>getServerSideProps</code> و <code>getInitialProps</code>.


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


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


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


* الصفحة عبارة عن وجهة ديناميكية.
* الصفحة عبارة عن وجهة ديناميكية dynamic route.
* تضم الصفحة قيم استعلام في عنوان URL.
* هناك قيم استعلام في عنوان URL للصفحة.
* تهيئة الإعداد [[Next.js/next.config.js|<code>Rewrites</code>]] في ملف <code>next.config.js</code> لأنه قد يمتلك معاملات يؤمنها الكائن <code>query</code> وتحتاج إلى التحليل.
* تهيئة الإعداد [[Next.js/next.config.js|<code>Rewrites</code>]] في ملف <code>next.config.js</code>، فقد يتضمن معاملات يؤمنها الكائن <code>query</code> وتحتاج إلى التحليل.


إن أردت أن تعرف أن الاستعلام قد حُدِّث تمامًا وأصبح جاهزًا للاستخدام، بإمكانك تفعيل الحقل <code>isReady</code> في المكوّن [[Next.js/api router|<code>next/router</code>]]<blockquote>'''ملاحظة''': تبقى المعاملات التي تضيفها الوجهات الديناميكة إلى صفحة تستخدم الدالة <code>getStaticProps</code> متاحة دائمًا ضمن الكائن <code>query</code>.</blockquote>يعطي تنفيذ الأمر <code>next build</code> ملفات <code>html.</code> للصفحات المحسّنة بشكل ساكن، وستكون نتيجة الصفحة <code>pages/about.js</code> مثلًا على الشكل:<syntaxhighlight lang="bash">
وإن أردت أن تعرف أن الاستعلام قد حُدِّث تمامًا وأصبح جاهزًا للاستخدام، بإمكانك تفعيل الحقل <code>isReady</code> في المكوّن <code>[[Next.js/next router|next/router]]</code>.<blockquote>'''ملاحظة''': تبقى المعاملات التي تضيفها الوجهات الديناميكة إلى الصفحات التي تستخدم الدالة <code>getStaticProps</code> متاحةً دائمًا ضمن الكائن <code>query</code>.</blockquote>يعطي تنفيذ الأمر <code>next build</code> ملفات <code>html.</code> للصفحات المحسّنة بشكل ساكن، وستكون نتيجة الصفحة <code>pages/about.js</code> مثلًا على الشكل:<syntaxhighlight lang="bash">
.next/server/pages/about.html
.next/server/pages/about.html
</syntaxhighlight>وإن أضفت <code>getServerSideProps</code> إلى الصفحة، فستكون صفحة JavaScript كالتالي:<syntaxhighlight lang="bash">
</syntaxhighlight>وإن أضفت <code>getServerSideProps</code> إلى الصفحة، فستكون صفحة JavaScript كالتالي:<syntaxhighlight lang="bash">
سطر 20: سطر 19:
</syntaxhighlight>
</syntaxhighlight>


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


* إن كان لديك [[Next.js/custom app|تطبيق مخصص]] يستخدم الدالة <code>getInitialProps</code>، فسيُعطًّل التحسين في الصفحات التي لا تدعم التوليد الساكن.
* إن كان لديك [[Next.js/custom app|تطبيق مخصص]] يستخدم الدالة <code>getInitialProps</code>، فسيُعطًّل التحسين في الصفحات التي لا تدعم التوليد الساكن.
* إن كان لديك [[Next.js/ custom document|مستند مخصص]] يستخدم الدالة <code>getInitialProps</code>، تأكد من قيمة <code>ctx.req</code> قبل أن تفترض أن الصفحة ستُصيَّر من جانب الخادم. إذ يأخذ الخيار <code>ctx.req</code> القيمة <code>undefined</code> للصفحات التي تُصيّر مسبقًا.
* إن كان لديك [[Next.js/custom document|مستند مخصص]] يستخدم الدالة <code>getInitialProps</code>، تأكد من قيمة <code>ctx.req</code> قبل أن تفترض أن الصفحة ستُصيَّر من جانب الخادم. إذ يأخذ الخيار <code>ctx.req</code> القيمة <code>undefined</code> للصفحات التي تُصيّر مسبقًا.
* تجنب استخدام القيمة <code>asPath</code> مع <code>next/router</code> في شجرة التصيير rendering tree حتى تصبح قيمة <code>isReady</code> من الموجه هي <code>true</code>، إذ تُضبط قيمة <code>asPath</code> في الصفحات الساكنة المُحسَّنة في طرف العميل لا في طرف الخادم فتأكد من استعمالها استعمالًا صحيحًا لتجنب الأخطاء، وانظر مثال [https://github.com/vercel/next.js/tree/canary/examples/active-class-name class-name] الذي يوضع إحدى طرق استعمال <code>asPath</code> كخاصية.


== المصادر ==
== المصادر ==


* الصفحة [https://nextjs.org/docs/advanced-features/automatic-static-optimization Automatic Static Optimization] من توثيق Next.js الرسمي.
* الصفحة [https://nextjs.org/docs/advanced-features/automatic-static-optimization Automatic Static Optimization] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 17:09، 3 يناير 2023

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

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

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

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

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

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

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

محاذير

  • إن كان لديك تطبيق مخصص يستخدم الدالة getInitialProps، فسيُعطًّل التحسين في الصفحات التي لا تدعم التوليد الساكن.
  • إن كان لديك مستند مخصص يستخدم الدالة getInitialProps، تأكد من قيمة ctx.req قبل أن تفترض أن الصفحة ستُصيَّر من جانب الخادم. إذ يأخذ الخيار ctx.req القيمة undefined للصفحات التي تُصيّر مسبقًا.
  • تجنب استخدام القيمة asPath مع next/router في شجرة التصيير rendering tree حتى تصبح قيمة isReady من الموجه هي true، إذ تُضبط قيمة asPath في الصفحات الساكنة المُحسَّنة في طرف العميل لا في طرف الخادم فتأكد من استعمالها استعمالًا صحيحًا لتجنب الأخطاء، وانظر مثال class-name الذي يوضع إحدى طرق استعمال asPath كخاصية.

المصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/automatic_static_optimization&oldid=32572»