الـ Framework: اختار وانطلق

الهدف

بنهاية الدرس تعرف الفرق بين مكوّن-سيرفر (Server Component) ومكوّن-براوزر (Client Component)، تقدر تشوف وين يعيش التوجيه (routing) ووين تعيش واجهة البرمجة (API)، وما تحتاج تسأل "شنو framework أحسن؟" مرة ثانية.

ليش هذا الحين؟

ترى أكثر قرار يضيّع وقت المؤسسين الجدد هو التردد بين frameworks. "شنو أحسن — Next.js ولا Remix ولا Nuxt؟" هالسؤال الغلط. القرار الصح هو: اختار واحد وتعمّق فيه. Framework switching بعد ما تبني شهور = خسارة كل شي. هالدرس يخليك تقرر مرة وحدة وتمشي.

الفكرة

الإطار البرمجي (framework) أول شي يساعدك يمشي، وبعدين يصير أساس البيت اللي ما تقدر تهدمه.

بدون framework، تحتاج تقرر كيف تنظّم ملفاتك، كيف تسوي routing، كيف تشغّل السيرفر، كيف تبني API. كل قرار ياكل وقت. الـ framework يحل كل هذا بـ conventions.

المشكلة إن الـ conventions تصير أساس app. لو غيّرت framework = تغيير الأساس = هدم البيت.

القاعدة: اختار framework واحد وتعمّق فيه.

الاختيار الصح للـ founders:

Next.js للـ web apps و SaaS:

• React في القلب — أكبر ecosystem في الـ frontend
• العرض من جهة السيرفر (Server-Side Rendering) جاهز من البداية — سرعة وتحسين محركات البحث (SEO)
• API routes في نفس المشروع — ما تحتاج سيرفر منفصل
• نشر (deployment) على Vercel بضغطة — صفر configuration

Astro للـ content sites (مثل هالـ platform):

• سرعة خرافية — يرسل HTML بس، بدون JS افتراضي
• مثالي للدورات والمدونات
• بس ما يناسب SaaS أو apps تحتاج real-time

Next.js App Router — 4 مفاهيم تحتاجها:

1. مجلد /app = الـ routing. كل مجلد = URL. /app/dashboard/page.tsx = /dashboard.

2. Server Component (default) = ينرندر على السيرفر. يقدر يكلّم الـ database مباشرة. ماكو فيه state ولا event handlers.

3. Client Component ('use client') = ينرندر في البراوزر. يقدر يستخدم useState، useEffect، event handlers.

4. API Route (/app/api/) = backend في نفس المشروع. كل ملف route.ts يعالج HTTP requests.