إيه الفرق بين الـ SSR والـ CSR في Next.js ومتى أختار كل واحد فيهم؟

Question

يا شباب أنا ببدأ مشروع جديد بـ Next.js ومحتار جداً في اختيار طريقة الـ Rendering المناسبة.
أنا عارف إن فيه حاجات بتتعرض من ناحية السيرفر (Server-Side Rendering) وحاجات تانية بتتعرض في المتصفح عند الزبون (Client-Side Rendering). اللي محتاج أفهمه بالضبط:
هو إمتى أستخدم 'use client' وأخلي الكود يشتغل CSR؟ وإمتى أسيب المكون Server Component؟ وإيه التأثير الحقيقي للـ SSR على الـ SEO وسرعة التحميل الأولى للموقع؟

abdelrahman · Accepted Answer

الفكرة كلها بتعتمد على المكان اللي الكود بيتنفذ فيه والأولوية عندك هل هي للـ SEO والسرعة ولا لـ التفاعلية (Interactivity):
1. الـ Server-Side Rendering (SSR)
بيشتغل فين؟ الكود بيتنفذ كاملاً على السيرفر، والسيرفر بيبعت للمتصفح صفحة HTML جاهزة بالبيانات.

المميزات: ممتازة جداً للـ SEO (محركات البحث بتشوف المحتوى جاهز)، وسريعة في أول تحميل للموقع (FCP).

امتى تستخدمه؟ في الصفحات الرئيسية، مقالات المدونة، صفحات المنتجات، أي صفحة محتاجة تظهر في جوجل ومفيهاش تفاعل لحظي مع اليوزر.

2. الـ Client-Side Rendering (CSR)
بيشتغل فين؟ المتصفح بياخد كود JavaScript ينفذه عنده ويجيب البيانات بعدها بـ API. بنفعلها في Next.js بكتابة 'use client' في أول الملف.

المميزات: بتسمحلك تعمل تفاعلية كاملة (زي الأحداث onClick، استخدام الـ Hooks زي useState و useEffect، أو جلب موقع اليوزر).

إيه الفرق بين الـ SSR والـ CSR في Next.js ومتى أختار كل واحد فيهم؟

التعليقات (1)