التصيير (Rendering)

بشكل افتراضي، يقوم Next.js بإصدار صفحات مسبقًا (pre-renders) لكل صفحة. وهذا يعني أن Next.js يقوم بإنشاء HTML لكل صفحة مسبقًا، بدلاً من القيام بذلك كله بواسطة JavaScript من جانب العميل (client-side). يمكن أن يؤدي التصيير المسبق إلى تحسين الأداء وتحسين محركات البحث (SEO).

يرتبط كل HTML تم إنشاؤه بأقل كود JavaScript ضروري لتلك الصفحة. عند تحميل الصفحة بواسطة المتصفح، يتم تشغيل كود JavaScript الخاص بها مما يجعل الصفحة تفاعلية بالكامل (تسمى هذه العملية hydration في React).

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

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

• التوليد الثابت: يتم إنشاء HTML في وقت البناء (build time) وسيتم إعادة استخدامه في كل طلب.
• التصيير من جانب الخادم: يتم إنشاء HTML في كل طلب.

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

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

يمكنك أيضًا استخدام جلب البيانات من جانب العميل (client-side data fetching) جنبًا إلى جنب مع التوليد الثابت أو التصيير من جانب الخادم. وهذا يعني أنه يمكن تصيير بعض أجزاء الصفحة بالكامل بواسطة JavaScript من جانب العميل. لمعرفة المزيد، راجع وثائق جلب البيانات.