أسئلة مقابلات SSR, SSG & Server Components في React
10 سؤال عن SSR, SSG & Server Components من مسار React. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متوسط
ما الفرق بين CSR و SSR و SSG و ISR في منظومة تطبيقات ريأكت الحديثة؟
CSR يبني الواجهة في المتصفح، و SSR يبني صفحة الـ HTML عند كل طلب في الخادم، و SSG يبني الصفحات وقت تجميع المشروع (Build time)، بينما ISR يعيد توليد الصفحات الثابتة دورياً في الخلفية عند الطلب.
اقرأ الشرح الكامل - متقدم
ما هي معضلة الـ Hydration وما هي مسببات الـ Hydration Mismatch الشهيرة؟
هي عملية ربط أحداث JavaScript بشجرة الـ HTML المبنية مسبقاً من الخادم؛ ويحدث الـ Mismatch عندما تختلف بنية الشجرة المكونة على السيرفر عن بنية الشجرة التي يريد العميل إنشاؤها.
اقرأ الشرح الكامل - متقدم
ما هي مكونات خادم ريأكت (React Server Components - RSC) وكيف تختلف جوهرياً عن SSR؟
الـ RSCs هي مكونات تنفذ حصرياً على الخادم ولا ترسل أي كود JavaScript إلى حزمة العميل على الإطلاق، على عكس SSR الذي يرسل كود JS لكافة المكونات ليتم عمل Hydrate لها.
اقرأ الشرح الكامل - متوسط
ما هو التوجيه "use client" ومتى يجب استخدامه في بنية RSC؟
هو علامة ترسيمية (Boundary) تحدد نقطة الانتقال من بيئة عمل المكونات الخادومية إلى مكونات العميل التفاعلية التي تتطلب استخدام الـ State والـ Effects وأحداث المتصفح.
اقرأ الشرح الكامل - متقدم
ما هو الـ Streaming SSR وكيف يعمل مع دالة renderToPipeableStream في Node.js؟
هو تقنية تتيح إرسال أجزاء الـ HTML المكتملة إلى المتصفح بشكل تدفقي متتابع عبر Streams دون انتظار اكتمال تحميل أثقل أجزاء الصفحة، مما يقلص زمن ظهور أول بايت وأول محتوى مرئي.
اقرأ الشرح الكامل - متوسط
كيف يعمل Suspense لجلب البيانات (Data Fetching) وإدارة حالات التحميل المتداخلة؟
يتيح Suspense للمكونات إيقاف تصييرها مؤقتاً عند انتظار بيانات غير متزامنة، ويعرض أقرب واجهة بديلة (Fallback) محددة في الشجرة حتى تكتمل البيانات دون كتابة شروط isLoading يدوية.
اقرأ الشرح الكامل - متقدم
ما هي دالة use() الجديدة في React 19 وكيف تتعامل مع الـ Promises والـ Context؟
دالة use() تقبل إما Promise أو Context، وتتميز عن باقي الـ Hooks بإمكانية استدعائها مشروطة داخل جمل if أو حلقات التكرار، وتتكامل تلقائياً مع Suspense.
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع معالجة الـ SEO والوسوم الوصفية (Metadata & Open Graph) في تطبيقات ريأكت؟
في تطبيقات CSR نستخدم مكتبات تعديل الـ Head أو نوفر Pre-rendering، وفي SSR و Next.js نستخدم الـ Metadata API لتوليد وسوم title و meta و og ديناميكياً على السيرفر قبل إرسال الصفحة.
اقرأ الشرح الكامل - متقدم
ما هي استراتيجية الـ Islands Architecture وكيف تقارن بـ React Hydration التقليدي؟
تقوم معمارية الجزر بعرض الصفحة كـ HTML ثابت كلياً، وتفعيل الـ JavaScript والـ Hydration فقط في جزر صغيرة مستقلة وتفاعلية، مما يحذف أكواد الجافاسكربت غير المستخدمة.
اقرأ الشرح الكامل - متقدم
كيف تتعامل مع مشاكل الـ Cookies والجلسات والـ Caching في بيئة الـ Edge Runtime مع ريأكت؟
عبر قراءة ملفات تعريف الارتباط في خوادم الحافة (Edge Handlers) وضبط ترويسات Cache-Control بدقة واستخدام الـ Middleware لتفادي تسريب بيانات المستخدمين بين الطلبات المخبأة.
اقرأ الشرح الكامل