نمطان من التصيير المسبق (Pre-rendering)

يقدم Next.js نمطين من التصيير المسبق: التوليد الثابت (Static Generation) والتصيير من جانب الخادم (Server-side Rendering). الفرق بينهما يكمن في توقيت إنشاء HTML للصفحة.

• التوليد الثابت هو أسلوب التصيير المسبق الذي ينشئ HTML أثناء عملية البناء. ثم يتم إعادة استخدام HTML المصير مسبقًا في كل طلب.
• التصيير من جانب الخادم هو أسلوب التصيير المسبق الذي ينشئ HTML في كل طلب.

في وضع التطوير (عند تشغيل npm run dev أو yarn dev)، يتم تصيير الصفحات مسبقًا في كل طلب. ينطبق هذا أيضًا على التوليد الثابت لتسهيل عملية التطوير. عند الانتقال إلى الإنتاج، سيحدث التوليد الثابت مرة واحدة أثناء عملية البناء، وليس في كل طلب.

على أساس كل صفحة

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

متى تستخدم التوليد الثابت مقابل التصيير من جانب الخادم

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

يمكنك استخدام التوليد الثابت للعديد من أنواع الصفحات، بما في ذلك:

• صفحات التسويق
• منشورات المدونة
• قوائم منتجات التجارة الإلكترونية
• صفحات المساعدة والوثائق

اسأل نفسك: "هل يمكنني تصيير هذه الصفحة مسبقًا قبل طلب المستخدم؟" إذا كانت الإجابة نعم، فيجب عليك اختيار التوليد الثابت.

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

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

سنركز على التوليد الثابت

في هذا الدرس، سنركز على التوليد الثابت. في الصفحة التالية، سنتحدث عن التوليد الثابت مع وبدون بيانات.