التصيير (Rendering)

بشكل افتراضي، يقوم Next.js بالتصيير المسبق (pre-rendering) لكل صفحة. هذا يعني أن Next.js يقوم بإنشاء HTML لكل صفحة مسبقًا، بدلاً من ترك كل شيء لـ JavaScript من جانب العميل. يمكن أن يؤدي التصيير المسبق إلى تحسين الأداء وتحسين محركات البحث (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 من جانب العميل. لمعرفة المزيد، راجع وثائق جلب البيانات.