التصيير المسبق
قبل أن نتحدث عن جلب البيانات، دعونا نناقش أحد أهم المفاهيم في Next.js: التصيير المسبق.
بشكل افتراضي، يقوم Next.js بتصيير كل صفحة مسبقًا. هذا يعني أن Next.js يولد HTML لكل صفحة مقدمًا، بدلاً من القيام بكل ذلك عبر JavaScript من جانب العميل. يمكن أن يؤدي التصيير المسبق إلى تحسين الأداء وتحسين محركات البحث (SEO).
يرتبط كل HTML تم إنشاؤه بأقل كود JavaScript ضروري لتلك الصفحة. عندما يتم تحميل الصفحة بواسطة المتصفح، يتم تشغيل كود JavaScript الخاص بها مما يجعل الصفحة تفاعلية بالكامل. (تسمى هذه العملية الترطيب (hydration)).
التحقق من حدوث التصيير المسبق
يمكنك التحقق من حدوث التصيير المسبق عن طريق اتباع الخطوات التالية:
- قم بتعطيل JavaScript في متصفحك. (إليك الطريقة في Chrome).
- حاول الوصول إلى هذه الصفحة (النتيجة النهائية لهذا البرنامج التعليمي).
يجب أن ترى أن تطبيقك يتم عرضه بدون JavaScript. هذا لأن Next.js قام بتصيير التطبيق مسبقًا إلى HTML ثابت، مما يسمح لك برؤية واجهة المستخدم للتطبيق دون تشغيل JavaScript.
ملاحظة: يمكنك أيضًا تجربة الخطوات المذكورة أعلاه على
localhost، ولكن لن يتم تحميل CSS إذا قمت بتعطيل JavaScript.
إذا كان تطبيقك عبارة عن تطبيق React.js عادي (بدون Next.js)، فلا يوجد تصيير مسبق، لذلك لن تتمكن من رؤية التطبيق إذا قمت بتعطيل JavaScript. على سبيل المثال:
- قم بتمكين JavaScript في متصفحك وتحقق من هذه الصفحة. هذا تطبيق React.js عادي تم إنشاؤه باستخدام Create React App.
- الآن، قم بتعطيل JavaScript وقم بالوصول إلى نفس الصفحة مرة أخرى.
- لن ترى التطبيق بعد الآن - بدلاً من ذلك، ستظهر رسالة "You need to enable JavaScript to run this app". هذا لأن التطبيق لم يتم تصييره مسبقًا إلى HTML ثابت.
ملخص: التصيير المسبق مقابل عدم التصيير المسبق
إليك ملخص سريع بصري:
بعد ذلك، دعونا نتحدث عن نوعين من التصيير المسبق في Next.js.