التصيير (Rendering)

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

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

التصيير المسبق

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

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

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

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

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