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

الهدف

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

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

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

الفكرة

Framework = training wheels تصير load-bearing walls.

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

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

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

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

Next.js للـ web apps و SaaS:

• React في القلب — أكبر ecosystem في الـ frontend
• Server-Side Rendering جاهز من البداية — سرعة و SEO
• API routes في نفس المشروع — ما تحتاج سيرفر منفصل
• Vercel deployment بضغطة — صفر 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.