دردشة سريعة عن الـ React Server Components ⚡️
.
.
لو بتشتغل React بقالك فترة، أكيد عارف إن واحد من أكبر التحديات هو إن الأداء ساعات بيتأثر، والـ bundle size بيكبر، وبتلاقي نفسك بتجري ورا الـ optimization يمين وشمال: تضيف memo هنا، و useCallback هناك، و Server-Side Rendering عشان السرعة… بس لسه حاسس إن فيه حاجة ناقصة.

علشان كده React طلعوا بحاجة اسمها React Server Components (RSC)…

الـ React Server Components بتنقل React إلى مستوى تاني خالص. بتخلّي جزء كبير من الكود يشتغل على الـ Server بدل ما ينزل كله للـ Client، وبالتالي:

✅ الـ performance أعلى
✅ الـ bundle size أقل
✅ الـ data fetching أسهل وأبسط
✅ هيكون عندك zero client-side overhead لحاجات مش محتاجة تكون Client components أصلًا

يعني تخيّل تعمل Component كاملة تتنفذ على السيرفر من غير ما تنزل للمتصفح… وتقدر تدخل فيها مباشرة DB queries أو تستخدم APIs من غير ما تفكر في security ولا hooks زي useEffect…

———

الـ RSC هي Components بيحصل لها render بالكامل على الـ Server، ومش بتوصل للـ Browser كـ JavaScript code. هي بتبعت الـ UI final result للـ Client بشكل lightweight، من غير ما يبقى محتاج hydrate زي الـ SSR.

———

📌 الفرق بينها وبين SSR (Server-Side Rendering)؟

📍 الـ SSR:
- السيرفر بيعمل render، بس بيبعت HTML + hydration scripts
- بيبعت JS كتير للـ Client
- الهدف: تحسين الـ First Paint

📍 الـ Server Components:
- السيرفر بيبعت UI بدون hydration، ومش كل حاجة بتحتاج تكون interactive
- ممكن تمنع تحميل JS أصلًا لبعض الـ Components
- الهدف: تقليل الـ bundle size + handling logic على السيرفر

———

✅ الـ Server Components: بتتكتب بنفس شكل الـ Components العادية، بس بيحصل لها render على السيرفر فقط، ومينفعش تستخدم فيها useState أو useEffect.

✅ الـ Client Components: دي اللي بتشتغل على الـ Browser، وبتحتاج تكتب في أولها "use client" عشان React تفهم إنها لازم تنزل للـ Client.

———

وفقكم الله لكل خير 🌿

———

#react@the_developer_guide