Magdy Atef Zahran

🧠 ازاي تبني Rendering Strategy Hybrid في مشروع SaaS بـ Next.js 👨‍💻🔥

فيه ناس أول ما تبدأ تشتغل على مشروع SaaS بتختار نوع Rendering واحد وتكمل بيه المشروع كله…
اما كله SSR أو العكس كله SSG عشان هيكون أسرع وخلاص

وساعتها هتظهرلك مشاكل زي:

الداتا مش بتتحدث
اللود تقيل
Billing pages بطيئة
وال SEO مش مظبوط

لكن المشاريع الكبيرة بتحتاج Hybrid Rendering… يعني كل صفحة ليها Strategy على حسب وظيفتها مش حسب الفريمورك.

🎯 في البدايه يعني إيه Hybrid Rendering أصلاً؟

إنك تستخدم Mix بين:

SSR للصفحات اللي محتاجة Data Fresh
SSG للصفحات الثابتة
ISR للحاجات اللي بتتحدث بس مش لحظيًا
Client Rendering للحاجات الشخصية أو الـ Interactive
Server Actions / RSC للحاجات اللي محتاجة Server Logic مباشر

ف بدل ما المشروع كله يبقى SSR لا, كل صفحة ليها Strategy حسب وظيفتها

⚙️ طب نختار بناءً على إيه بقى؟

الجدول	طبيعتها	طبيعتها	ليه؟
Dashboard Metrics	Data Real-Time	SSR + RevalidateTag	سرعة + Freshness
Pricing	Static + SEO	SSG + ISR	تحميل أسرع + SEO
Profile	Personal	Client + Suspense	محتوى خاص
Docs / Blog	Static	SSG	ثابت و SEO
Admin Panel	Secure + Dynamic	SSR / Server Actions	Auth + Sensitive

🧩 مثال عملي — Dashboard Metrics (SaaS)

export const dynamic = "force-dynamic"; export async function GET() { const data = await getMetrics(); return Response.json(data, { headers: { "x-revalidate-tag": "dashboard" }, }); }

وتعمل Revalidate من Background Job:

revalidateTag("dashboard");

كدا بتاخد Fresh Data من غير ما تحرق SSR كل مرة.

مثال — صفحة Pricing (Public + SEO)

export const revalidate = 3600; // كل ساعة

ولو عدلت أسعار Stripe:

await res.revalidate("/pricing");

مثال — صفحة Profile (User + Client)

"use client"; const { data, isLoading } = useQuery({ queryKey: ["profile"], queryFn: () => fetch("/api/me").then(res => res.json()) });

🔐 Auth & Sessions في Context الـ Rendering

الجدول	مكان الريندر	طريقة جلب السيشن
Public Page	Server	fetch عادي
Private Page	Server	getServerSession()
Client-only	Client	useSession()

import { getServerSession } from "next-auth"; const session = await getServerSession();

ودا Structure مناسب لمشاريع Hybrid SaaS:

src/ ├── app/ │ ├── dashboard/ ← SSR + Revalidate │ ├── pricing/ ← SSG + ISR │ ├── profile/ ← Client + Suspense │ ├── api/ ← Internal API │ └── actions/ ← Server Actions ├── lib/ │ ├── metrics.ts │ ├── revalidate.ts │ └── auth.ts

وفي الآخر… مش مهم تستخدم SSR ولا SSG… المهم تستخدم الصح في المكان الصح
لان SaaS مش Template جاهز، وكل صفحة ليها هدف مختلف… وبالتالي ليها Rendering مختلف.