🔥 App Router vs Pages Router: الفرق الحقيقي مش مجرد فولدر!#

المقدمة: تغيير جذري مش مجرد Update#

فيه ناس كتير أول ما شافت مجلد app/ في Next.js 13 قالت “آه، هما بس غيروا اسم الفولدر من pages لـ app وخلاص”، بس الحقيقة؟ ده أكبر تغيير في تاريخ Next.js والـ React نفسها.

الـ App Router مش مجرد نظام routing جديد. ده paradigm shift كامل في طريقة إنك تفكر في بناء تطبيقات الويب. الفكرة كلها اتغيرت من الأساس.

الفكرة الأساسية: Server-First بدل Client-First#

Pages Router (الطريقة القديمة):

• كل الكود JavaScript بيروح للعميل (المتصفح)
• حتى لو بتعمل SSR، الكود بيروح كله للمتصفح
• React بيعمل “Hydration” للصفحة كلها
• النتيجة: باندل JavaScript كبير = بطء في التحميل

App Router (الطريقة الجديدة):

• الكود بيتنفذ على السيرفر أولاً
• بس اللي محتاج interaction بيروح للعميل
• React بتبعت HTML جاهز + شوية JavaScript للتفاعل
• النتيجة: باندل أصغر بكتير = سرعة وأداء أحسن

ليه التغيير ده حصل؟#

لما React أعلنت عن React 18 ومعاها Server Components، كان ده تحدي كبير لـ Next.js. إزاي يدمجوا التقنية الجديدة دي في framework موجود من سنين؟

الحل: يعملوا نظام جديد تماماً = App Router

إيه اللي هتتعلمه في المقالة دي؟#

في المقالة دي، مش بس هتعرف الفرق بين App Router و Pages Router. هتفهم بالظبط إزاي كل واحد بيشتغل من الداخل، مع أمثلة واقعية وتفصيلية على كل نقطة. هتعرف:

• ✅ إزاي React Server Components بتشتغل بالظبط
• ✅ الفرق بين Server و Client Components بالتفصيل الممل
• ✅ أنواع الـ Rendering المختلفة (Static, Dynamic, Streaming, ISR)
• ✅ نظام الكاش المعقد في App Router وإزاي تتحكم فيه
• ✅ Server Actions وإزاي تستخدمها صح
• ✅ Middleware والحاجات المتقدمة
• ✅ أمثلة واقعية كاملة (Authentication, E-commerce, Blog)
• ✅ كل المشاكل اللي ممكن تقابلك وإزاي تحلها

يلا بينا نبدأ رحلة الفهم العميق دي! 🚀

🎯 فهم React Server Components (RSC): الأساس اللي بني عليه كل حاجة#

قبل ما ندخل في المقارنات، لازم نفهم الأول React Server Components لأنها الأساس اللي App Router مبني عليه. بدونها، مش هتفهم ليه التغيير ده أصلاً.

إيه هي React Server Components بالظبط؟#

الفكرة ببساطة: في React التقليدية، كل المكونات (Components) بتشتغل في المتصفح (Client). حتى لو عملت Server-Side Rendering (SSR)، في الآخر كل الكود JavaScript بيروح للمتصفح عشان يعمل “Hydration”.

React Server Components بتقول: طب ليه نبعت كل الكود للعميل؟ خلينا نقسم المكونات لنوعين:

1. Server Components - بتشتغل على السيرفر بس، مش بتروح للعميل خالص
2. Client Components - بتشتغل في المتصفح زي الأول

مثال عملي يوضح الفرق:#

الطريقة القديمة (كل حاجة Client):#

// pages/blog.js - Pages Router
import { useState, useEffect } from 'react';
import { db } from '@/lib/db'; // ❌ لا! مش هينفع تستخدم DB هنا

export default function Blog() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    // محتاج تعمل API call
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts);
  }, []);
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

المشكلة:

• محتاج تعمل API route منفصل (/api/posts)
• محتاج تستخدم useEffect و useState
• الكود بيتنفذ في المتصفح
• كل المكتبات بتروح للعميل
• Loading state محتاج تديره يدوي

الطريقة الجديدة (Server Component):#

// app/blog/page.js - App Router
import { db } from '@/lib/db'; // ✅ ينفع! السيرفر بس هو اللي هيشوف ده

async function Blog() {
  // ✅ اتصال مباشر بقاعدة البيانات!
  const posts = await db.post.findMany({
    select: { id: true, title: true, excerpt: true }
  });
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

export default Blog;

الفوايد:

• ✅ اتصال مباشر بالداتابيز من المكون نفسه!
• ✅ مفيش API route محتاجه
• ✅ مفيش useState أو useEffect
• ✅ المكتبات (زي Prisma/Drizzle) مش بتروح للعميل
• ✅ أبسط وأوضح وأسرع

إزاي RSC بتشتغل من الداخل؟#

دي رحلة Request كاملة عشان تفهم بالظبط:

1. المستخدم يفتح /blog#

Browser → Next.js Server

2. Next.js بتشغل Server Components على السيرفر#

// على السيرفر:
const posts = await db.post.findMany(); // استعلام قاعدة البيانات
// بتجيب البيانات من DB

3. Next.js بتحول الـ Component لـ RSC Payload (تنسيق خاص)#

RSC Payload = {
  tree: { /* شجرة المكونات */ },
  seedData: { /* البيانات */ }
}

4. Next.js بتبعت HTML + RSC Payload للمتصفح#

<!-- HTML جاهز -->
<div>
  <article>
    <h2>عنوان المقال الأول</h2>
    <p>نبذة مختصرة...</p>
  </article>
  <!-- باقي المقالات -->
</div>

<!-- + شوية بيانات للتفاعل (لو في Client Components) -->

5. المتصفح بيعرض HTML فوراً#

النتيجة: المستخدم شاف المحتوى بسرعة! 🚀

الفرق عن SSR التقليدي:

• في SSR القديم: HTML جاهز ✅ + كل الكود JavaScript بيروح للعميل ❌
• في RSC: HTML جاهز ✅ + بس JavaScript اللي محتاجه للتفاعل ✅

Server Components vs Client Components: جدول المقارنة التفصيلي#

متى تستخدم Server Component؟#

استخدم Server Component (الافتراضي) في الحالات دي:

// ✅ جلب بيانات من قاعدة البيانات
async function PostsList() {
  const posts = await db.post.findMany();
  return <div>{/* ... */}</div>;
}

// ✅ استخدام APIs خارجية
async function Weather() {
  const data = await fetch('https://api.weather.com/...');
  return <div>{/* ... */}</div>;
}

// ✅ عرض محتوى ثابت
function Header() {
  return <header><h1>موقعي</h1></header>;
}

// ✅ استخدام secrets بأمان
async function Dashboard() {
  const data = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${process.env.SECRET_TOKEN}` // ✅ آمن
    }
  });
  return <div>{/* ... */}</div>;
}

متى تستخدم Client Component؟#

استخدم Client Component (مع "use client") في الحالات دي:

// ✅ التفاعل (onClick, onChange, onSubmit...)
'use client';
function Button() {
  return <button onClick={() => alert('مرحبا!')}>اضغط</button>;
}

// ✅ State Management
'use client';
import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ✅ Effects
'use client';
import { useEffect } from 'react';
function Analytics() {
  useEffect(() => {
    trackPageView();
  }, []);
  return null;
}

// ✅ Browser APIs
'use client';
function ThemeToggle() {
  const [theme, setTheme] = useState(() => 
    localStorage.getItem('theme') || 'light'
  );
  return <button onClick={() => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  }}>Toggle</button>;
}

قاعدة مهمة جداً: Server Component ممكن يستورد Client Component (العكس لأ!)#

// ✅ صح: Server Component → Client Component
// app/page.js (Server Component)
import ClientButton from './ClientButton'; // Client Component

export default function Page() {
  return (
    <div>
      <h1>مرحباً</h1>
      <ClientButton /> {/* ✅ ينفع */}
    </div>
  );
}

// ❌ غلط: Client Component → Server Component
// app/ClientComponent.js
'use client';
import ServerComponent from './ServerComponent'; // Server Component

export default function ClientComponent() {
  return <ServerComponent />; // ❌ لا! مش هيشتغل
}

الحل للحالة الثانية: استخدم children prop:

// ✅ الحل الصحيح
// app/page.js (Server Component)
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* ✅ Server Component كـ children */}
    </ClientWrapper>
  );
}

// ClientWrapper.js
'use client';
export default function ClientWrapper({ children }) {
  const [show, setShow] = useState(true);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && children}
    </div>
  );
}

🧱 الأول نرجع شوية: إيه اللي كان قبل كده؟#

Pages Router: النظام القديم بالتفصيل#

قبل Next.js 13، الدنيا كانت ماشية بنظام الـ Pages Router، واللي كان بسيط جداً:

البنية الأساسية:#

my-app/
├── pages/
│   ├── _app.js        ← Component أساسي بيلف كل الصفحات
│   ├── _document.js   ← HTML Document الأساسي
│   ├── index.js       ← الصفحة الرئيسية (/)
│   ├── about.js       ← صفحة About (/about)
│   ├── blog/
│   │   ├── index.js   ← قائمة المقالات (/blog)
│   │   └── [slug].js  ← مقال معين (/blog/my-post)
│   └── api/
│       └── hello.js   ← API Route (/api/hello)
└── public/            ← ملفات ثابتة

القواعد الأساسية:#

• أي ملف جوه pages/ = Route مباشر
• لو عايز صفحة جديدة، تعمل about.js وخلاص بقت /about
• عايز تجيب بيانات؟ تستخدم واحدة من دول:
  • getStaticProps - للصفحات الثابتة (SSG)
  • getServerSideProps - للصفحات الديناميكية (SSR)
  • getStaticPaths - للـ Dynamic Routes مع SSG

مثال كامل على Pages Router:#

// pages/blog/[slug].js
import { db } from '@/lib/db';

// بتجيب كل الـ paths الممكنة
export async function getStaticPaths() {
  const posts = await db.post.findMany();
  
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking' // أو true أو false
  };
}

// بتجيب البيانات لكل صفحة
export async function getStaticProps({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });
  
  return {
    props: { post },
    revalidate: 60 // ISR - تحديث كل 60 ثانية
  };
}

// الـ Component نفسه
export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

المشاكل في Pages Router:#

1. فصل بين جلب البيانات والعرض:

// Data fetching هنا
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// UI component هنا (بعيد عن البيانات)
export default function Page({ data }) {
  return <div>{data}</div>;
}

2. كل الكود بيروح للعميل:

// pages/products.js
import { db } from '@/lib/db'; // ❌ المكتبة دي بتروح للـ bundle!

export async function getServerSideProps() {
  const products = await db.product.findMany(); // السيرفر بس
  return { props: { products } };
}

export default function Products({ products }) {
  // حتى لو المكون ده مش بيستخدم db
  // المكتبة بتروح للـ bundle بسبب الـ import فوق
  return <div>{/* ... */}</div>;
}

الحل القديم: لازم تفصل الملفات:

// lib/products.js - Server-side only
export async function getProducts() {
  const { db } = await import('@/lib/db');
  return await db.product.findMany();
}

// pages/products.js
import { getProducts } from '@/lib/products';

export async function getServerSideProps() {
  const products = await getProducts();
  return { props: { products } };
}

3. Layouts مش مرنة:

// pages/_app.js
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

لو عايز layout مختلف لصفحات معينة؟ حل معقد!

4. مفيش Loading States تلقائية:

// كل ما الصفحة تتحمل، المستخدم بيستنى شاشة بيضا
// محتاج تعمل custom loading يدوي

5. مفيش Error Boundaries سهلة:

// محتاج تعمل Error Boundary يدوي لكل مكان
class ErrorBoundary extends React.Component {
  // كود كتير...
}

ليه Pages Router كان كويس في وقته؟#

مفهمناش غلط - Pages Router كان ثورة في وقته (2016-2022):

• ✅ بسيط وسهل التعلم
• ✅ File-based routing (فكرة عبقرية)
• ✅ SSR & SSG مدمجين
• ✅ API Routes
• ✅ Image Optimization
• ✅ Fast Refresh

بس… مع تطور React وظهور React 18، كان محتاج نقلة تانية.

💡 App Router: مش فولدر جديد، ده طريقة تفكير مختلفة#

إزاي بتقسم التطبيق#

الـ App Router بيعتمد على إنك تبني التطبيق بتقسيمة “Segments”، يعني كل مجلد جوّه app/ بيمثل جزء من المسار.

وجوا كل مجلد تقدر تحط ملفات خاصة:

يعني كل Route بقى مستقل بذاته، بكل اللي محتاجه — من UI لخطأ لتحميل.

مثال عملي على الهيكل:#

app/
├── layout.js              ← Layout رئيسي
├── page.js               ← الصفحة الرئيسية (/)
├── about/
│   └── page.js           ← صفحة About (/about)
├── blog/
│   ├── layout.js         ← Layout خاص بالمدونة
│   ├── page.js           ← قائمة المقالات (/blog)
│   ├── loading.js        ← تحميل المدونة
│   ├── error.js          ← معالجة أخطاء المدونة
│   └── [slug]/
│       └── page.js       ← مقال معين (/blog/post-1)
└── dashboard/
    ├── layout.js         ← Layout خاص بالـ Dashboard
    ├── page.js           ← لوحة التحكم (/dashboard)
    ├── settings/
    │   └── page.js       ← الإعدادات (/dashboard/settings)
    └── profile/
        └── page.js       ← الملف الشخصي (/dashboard/profile)

🎨 أنواع الـ Rendering في App Router: Static, Dynamic, Streaming و ISR#

ده واحد من أهم المواضيع اللي لازم تفهمها كويس. App Router بيدعم 4 أنواع rendering مختلفة، وكل واحد ليه استخداماته.

1. Static Rendering (SSG) - الافتراضي والأسرع#

ده الافتراضي! لو مكتبتش أي حاجة خاصة، Next.js بتعمل static rendering تلقائياً.

// app/about/page.js
// Static تلقائياً لأن مفيش dynamic data
export default function About() {
  return (
    <div>
      <h1>من نحن</h1>
      <p>معلومات عن الشركة...</p>
    </div>
  );
}

إزاي بتشتغل:

1. وقت الـ Build: Next.js بتنفذ المكون وتولد HTML
2. لما يجي request: بتبعت الـ HTML الجاهز فوراً (أسرع حاجة ممكنة!)
3. مفيش سيرفر processing - الملف موجود جاهز

متى تستخدمها:

• ✅ صفحات ثابتة (About, Contact, Terms)
• ✅ Blog posts (مش بتتغير كتير)
• ✅ Documentation
• ✅ Landing pages

مثال مع بيانات:

// app/blog/page.js
async function BlogPage() {
  // بتتنفذ وقت الـ Build مرة واحدة
  const posts = await fetch('https://api.example.com/posts', {
    cache: 'force-cache' // Static Cache (الافتراضي)
  }).then(r => r.json());
  
  return (
    <div>
      <h1>المدونة</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

export default BlogPage;

في Pages Router كان:

// pages/blog.js
export async function getStaticProps() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return { props: { posts } };
}

export default function BlogPage({ posts }) {
  return (/* ... */);
}

2. Dynamic Rendering (SSR) - لما تحتاج بيانات حديثة#

لما البيانات بتتغير مع كل request (زي سلة المشتريات، الملف الشخصي…).

// app/cart/page.js
import { cookies } from 'next/headers';

async function CartPage() {
  // استخدام cookies أو headers = Dynamic تلقائياً!
  const cookieStore = await cookies();
  const userId = cookieStore.get('userId');
  
  // بتتنفذ مع كل request
  const cart = await fetch(`https://api.example.com/cart/${userId}`, {
    cache: 'no-store' // Dynamic - مفيش cache
  }).then(r => r.json());
  
  return (
    <div>
      <h1>سلة المشتريات</h1>
      {cart.items.map(item => (
        <div key={item.id}>{item.name} - {item.price} جنيه</div>
      ))}
    </div>
  );
}

export default CartPage;

إزاي بتشتغل:

1. Request يجي للسيرفر
2. السيرفر ينفذ المكون ويجيب البيانات
3. يولد HTML ويبعته للعميل
4. كل request = عملية جديدة

Next.js بتعمل Dynamic Rendering تلقائياً لو:

• استخدمت cookies() أو headers()
• استخدمت searchParams في Page
• استخدمت cache: 'no-store' في fetch
• استخدمت Dynamic Functions

مثال آخر - صفحة البحث:

// app/search/page.js
async function SearchPage({ searchParams }) {
  // searchParams = Dynamic تلقائياً
  const { q } = await searchParams;
  
  const results = await fetch(
    `https://api.example.com/search?q=${q}`,
    { cache: 'no-store' }
  ).then(r => r.json());
  
  return (
    <div>
      <h1>نتائج البحث عن: {q}</h1>
      {results.map(result => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
}

export default SearchPage;

Force Dynamic:

// app/dashboard/page.js
// لو عايز تجبر الصفحة تبقى dynamic
export const dynamic = 'force-dynamic'; 
// أو
export const revalidate = 0;

async function Dashboard() {
  const data = await fetch('https://api.example.com/dashboard').then(r => r.json());
  return <div>{/* ... */}</div>;
}

export default Dashboard;

في Pages Router كان:

// pages/cart.js
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const cart = await fetch(`https://api.example.com/cart/${userId}`).then(r => r.json());
  return { props: { cart } };
}

export default function CartPage({ cart }) {
  return (/* ... */);
}

3. Incremental Static Regeneration (ISR) - أحسن ما في العالمين#

Static في الأول، بس بتتحدث كل فترة. أحسن حاجة للمدونات والأخبار!

// app/news/page.js
async function NewsPage() {
  const news = await fetch('https://api.example.com/news', {
    next: { revalidate: 60 } // تحديث كل 60 ثانية
  }).then(r => r.json());
  
  return (
    <div>
      <h1>آخر الأخبار</h1>
      {news.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.summary}</p>
        </article>
      ))}
    </div>
  );
}

export default NewsPage;

إزاي بتشتغل ISR:

Request 1 (0 seconds):
  → Static HTML موجود → بعته فوراً ✅
  
Request 2 (30 seconds):
  → Static HTML موجود → بعته فوراً ✅
  
Request 3 (65 seconds - بعد الـ 60 ثانية):
  → Static HTML موجود → بعته فوراً ✅
  → في الخلفية: بيجدد الصفحة 🔄
  
Request 4 (70 seconds):
  → HTML الجديد جاهز → بعته ✅

الفوايد:

• ✅ سرعة Static (المستخدم مش بيستنى)
• ✅ محتوى محدث (بيتجدد في الخلفية)
• ✅ توفير في السيرفر (مش كل request بيعمل rebuild)

مستويات مختلفة من Revalidation:

// 1. على مستوى الصفحة كلها
export const revalidate = 3600; // كل ساعة

// 2. على مستوى fetch معينة
async function ProductPage() {
  // المنتج - تحديث كل 10 دقائق
  const product = await fetch('https://api.example.com/product/1', {
    next: { revalidate: 600 }
  }).then(r => r.json());
  
  // المراجعات - تحديث كل دقيقة
  const reviews = await fetch('https://api.example.com/product/1/reviews', {
    next: { revalidate: 60 }
  }).then(r => r.json());
  
  return (/* ... */);
}

On-Demand Revalidation - تحديث بناءً على حدث:

// app/api/revalidate/route.js
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request) {
  const { path, tag } = await request.json();
  
  if (path) {
    revalidatePath(path); // تحديث صفحة معينة
  }
  
  if (tag) {
    revalidateTag(tag); // تحديث كل الصفحات اللي عليها الـ tag ده
  }
  
  return Response.json({ revalidated: true });
}

استخدامها:

// app/blog/[slug]/page.js
async function BlogPost({ params }) {
  const { slug } = await params;
  const post = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { 
      tags: ['posts', `post-${slug}`] // Tags للـ revalidation
    }
  }).then(r => r.json());
  
  return <article>{post.content}</article>;
}

// لما تعدل مقال:
// POST /api/revalidate
// { "tag": "post-my-article" }
// → الصفحة بتتحدث فوراً!

في Pages Router كان:

// pages/news.js
export async function getStaticProps() {
  const news = await fetch('https://api.example.com/news').then(r => r.json());
  return {
    props: { news },
    revalidate: 60
  };
}

4. Streaming SSR - أحدث وأذكى نوع#

الصفحة بتيجي تدريجياً - المستخدم بيشوف المحتوى جزء جزء مش بيستنى الصفحة كلها!

// app/dashboard/page.js
import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      {/* ده بيظهر فوراً */}
      <h1>لوحة التحكم</h1>
      
      {/* ده بيحمل في الخلفية */}
      <Suspense fallback={<div>جاري تحميل الإحصائيات...</div>}>
        <Analytics />
      </Suspense>
      
      {/* ده كمان بيحمل في الخلفية (بالتوازي مع Analytics) */}
      <Suspense fallback={<div>جاري تحميل المبيعات...</div>}>
        <Sales />
      </Suspense>
    </div>
  );
}

async function Analytics() {
  // بيانات بطيئة (3 ثواني)
  const data = await fetch('https://api.example.com/analytics', {
    next: { revalidate: 300 }
  }).then(r => r.json());
  
  return (
    <div className="stats">
      <h2>الإحصائيات</h2>
      <p>الزيارات: {data.visits}</p>
    </div>
  );
}

async function Sales() {
  // بيانات سريعة (1 ثانية)
  const data = await fetch('https://api.example.com/sales').then(r => r.json());
  
  return (
    <div className="sales">
      <h2>المبيعات</h2>
      <p>المبيعات اليوم: {data.today} جنيه</p>
    </div>
  );
}

Timeline الحدوث:

0.0s → المستخدم يطلب /dashboard
0.1s → العنوان + Loading states بتظهر فوراً
       ┌─────────────────────────┐
       │ لوحة التحكم            │
       ├─────────────────────────┤
       │ جاري تحميل الإحصائيات... │
       │ جاري تحميل المبيعات...   │
       └─────────────────────────┘

1.0s → Sales خلصت تحميل → بتتحدث!
       ┌─────────────────────────┐
       │ لوحة التحكم            │
       ├─────────────────────────┤
       │ جاري تحميل الإحصائيات... │
       │ المبيعات               │
       │ المبيعات اليوم: 5000   │
       └─────────────────────────┘

3.0s → Analytics خلصت تحميل → بتتحدث!
       ┌─────────────────────────┐
       │ لوحة التحكم            │
       ├─────────────────────────┤
       │ الإحصائيات             │
       │ الزيارات: 1234         │
       │ المبيعات               │
       │ المبيعات اليوم: 5000   │
       └─────────────────────────┘

الفوايد:

• ✅ المستخدم مش بيستنى الصفحة كلها
• ✅ أسرع First Contentful Paint (FCP)
• ✅ البيانات السريعة بتظهر الأول - البطيئة متأخرتش الصفحة
• ✅ تجربة مستخدم أحسن بكتير

مثال واقعي - صفحة منتج في متجر:

// app/products/[id]/page.js
import { Suspense } from 'react';

export default async function ProductPage({ params }) {
  const { id } = await params;
  
  // المعلومات الأساسية (سريعة) - بتظهر فوراً
  const product = await fetch(`https://api.example.com/products/${id}`, {
    cache: 'force-cache'
  }).then(r => r.json());
  
  return (
    <div>
      {/* الجزء ده بيظهر فوراً */}
      <h1>{product.name}</h1>
      <img src={product.image} alt={product.name} />
      <p className="price">{product.price} جنيه</p>
      <button>أضف للسلة</button>
      
      {/* المراجعات (ممكن تاخد وقت) */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
      
      {/* المنتجات المشابهة */}
      <Suspense fallback={<ProductsSkeleton />}>
        <RelatedProducts categoryId={product.categoryId} />
      </Suspense>
    </div>
  );
}

async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/products/${productId}/reviews`
  ).then(r => r.json());
  
  return (
    <div className="reviews">
      <h2>المراجعات ({reviews.length})</h2>
      {reviews.map(review => (
        <div key={review.id}>
          <p>{review.comment}</p>
          <span>⭐ {review.rating}</span>
        </div>
      ))}
    </div>
  );
}

Pages Router: مكنش فيه Streaming! كنت بتستنى الصفحة كلها.

المقارنة الشاملة: أنواع الـ Rendering#

إزاي تختار النوع المناسب؟#

سؤال نفسك:

1. البيانات بتتغير قد إيه؟

   • مش بتتغير → Static (SSG)
   • بتتغير كل شوية → ISR
   • بتتغير مع كل request → Dynamic (SSR)

2. الصفحة فيها أجزاء بطيئة؟

   • آه → Streaming مع Suspense
   • لأ → شوف السؤال الأول

3. محتاج user-specific data؟ (cookies, auth…)

   • آه → Dynamic (SSR)
   • لأ → شوف السؤال الأول

مثال عملي - موقع أخبار:

// الصفحة الرئيسية - ISR (تحديث كل 5 دقائق)
// app/page.js
export const revalidate = 300;

async function HomePage() {
  const news = await fetch('https://api.news.com/latest').then(r => r.json());
  return (/* ... */);
}

// صفحة القسم - ISR (تحديث كل 10 دقائق)
// app/[category]/page.js
export const revalidate = 600;

async function CategoryPage({ params }) {
  const { category } = await params;
  const news = await fetch(`https://api.news.com/${category}`).then(r => r.json());
  return (/* ... */);
}

// صفحة خبر معين - ISR + Streaming
// app/[category]/[slug]/page.js
export const revalidate = 3600; // ساعة

async function ArticlePage({ params }) {
  const { slug } = await params;
  
  // الخبر نفسه (سريع)
  const article = await fetch(`https://api.news.com/articles/${slug}`).then(r => r.json());
  
  return (
    <article>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
      
      {/* التعليقات (ممكن تبطئ) */}
      <Suspense fallback={<p>جاري تحميل التعليقات...</p>}>
        <Comments articleId={article.id} />
      </Suspense>
    </article>
  );
}

// الملف الشخصي - Dynamic (user-specific)
// app/profile/page.js
import { cookies } from 'next/headers';

async function ProfilePage() {
  const cookieStore = await cookies();
  const userId = cookieStore.get('userId');
  
  const user = await fetch(`https://api.news.com/users/${userId}`, {
    cache: 'no-store'
  }).then(r => r.json());
  
  return (/* ... */);
}

⚙️ جلب البيانات: تغيير كبير#

Pages Router (الطريقة القديمة):#

// pages/posts.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return {
    props: { posts }
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

المشكلة: الكود متقسم، جزء لجلب البيانات وجزء للعرض.

App Router (الطريقة الجديدة):#

// app/posts/page.js
async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

export default Posts;

الفايدة: الكود كله في مكان واحد! أسهل وأوضح.

التحكم في الكاش:#

// Cache لمدة 60 ثانية
const data = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
}).then(res => res.json());

// مفيش Cache خالص
const liveData = await fetch('https://api.example.com/live', {
  cache: 'no-store'
}).then(res => res.json());

// Cache دائم (Static)
const staticData = await fetch('https://api.example.com/static', {
  cache: 'force-cache'
}).then(res => res.json());

🧩 Layouts المتداخلة: ميزة جامدة#

Pages Router: محدود شوية#

// pages/_app.js
function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

المشكلة: لو عايز layout معين لجزء بس من الصفحات؟ لازم تعمل حيل وكود معقد.

App Router: مرونة أكتر#

// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

// app/dashboard/layout.js (Dashboard Layout)
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

الفايدة الكبيرة:

لما تتنقل من /dashboard لـ /dashboard/settings:

• الـ Root Layout مش بيتعمله re-render
• الـ Dashboard Layout مش بيتعمله re-render
• بس الـ page.js الجديد هو اللي بيتحمل

يعني:

• ✅ السرعة بتبقى أسرع
• ✅ الـ State بيتحفظ (القوائم المفتوحة، Scroll Position…)
• ✅ التجربة smooth

⚡ الأداء: ليه App Router أسرع؟#

1. Server Components = JavaScript أقل على العميل#

// App Router - Server Component
import { db } from '@/lib/db'; // مثال: Prisma, Drizzle, إلخ

async function UsersList() {
  const users = await db.user.findMany(); // أو db.query('SELECT * FROM users')
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

اللي بيوصل للعميل: HTML جاهز بس!

Pages Router: كل الكود + المكتبات بتروح للمتصفح.

مثال واقعي - Bundle Size:

Pages Router (الطريقة القديمة):#

// pages/products.js
import { PrismaClient } from '@prisma/client'; // 500 KB! ❌
import { useState } from 'react';

const prisma = new PrismaClient();

export async function getServerSideProps() {
  const products = await prisma.product.findMany();
  return { props: { products } };
}

export default function ProductsPage({ products }) {
  const [favorites, setFavorites] = useState([]);
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <button onClick={() => toggleFavorite(product.id)}>
            {favorites.includes(product.id) ? '❤️' : '🤍'}
          </button>
        </div>
      ))}
    </div>
  );
}

Bundle Size: ~520 KB (Prisma بتروح للعميل رغم إنها مش محتاجة! ❌)

App Router (الطريقة الجديدة):#

// app/products/page.js (Server Component)
import { db } from '@/lib/db'; // ✅ مش بتروح للعميل!
import { FavoriteButton } from './FavoriteButton';

async function ProductsPage() {
  const products = await db.product.findMany(); // Server-only
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <FavoriteButton productId={product.id} />
        </div>
      ))}
    </div>
  );
}

export default ProductsPage;

// app/products/FavoriteButton.js (Client Component)
'use client';
import { useState } from 'react';

export function FavoriteButton({ productId }) {
  const [isFavorite, setIsFavorite] = useState(false);
  
  return (
    <button onClick={() => setIsFavorite(!isFavorite)}>
      {isFavorite ? '❤️' : '🤍'}
    </button>
  );
}

Bundle Size: ~20 KB فقط! (500 KB أقل! 🚀)

2. Streaming Rendering#

// app/page.js
import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Welcome</h1>
      <Suspense fallback={<p>Loading posts...</p>}>
        <Posts />
      </Suspense>
      <Suspense fallback={<p>Loading comments...</p>}>
        <Comments />
      </Suspense>
    </div>
  );
}

النتيجة: المستخدم بيشوف المحتوى تدريجيًا، مش بيستنى الصفحة كلها.

3. مقارنة حجم الباندل:#

🔁 Loading و Error: تلقائي ومدمج#

Pages Router: لازم تعمله يدوي#

export default function Posts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return <div>{/* posts */}</div>;
}

الكود ده لازم تكرره في كل صفحة! تعب.

App Router: تلقائي وبسيط#

// app/posts/loading.js
export default function Loading() {
  return <div className="spinner">Loading posts...</div>;
}

// app/posts/error.js
'use client';
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

// app/posts/page.js
async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <div>{/* posts */}</div>;
}

بس كده! Next.js بيتعامل مع كل حاجة تلقائياً.

💬 Routing API: Hooks جديدة#

Pages Router:#

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { id, category } = router.query;
  
  router.push('/about');
  router.back();
}

App Router:#

'use client';
import { useRouter, usePathname, useSearchParams, useParams } from 'next/navigation';

function MyComponent() {
  const router = useRouter();
  const pathname = usePathname();        // '/blog/post-1'
  const searchParams = useSearchParams(); // ?sort=new&filter=tech
  const params = useParams();             // { slug: 'post-1' }
  
  // أكثر دقة وأسهل في الاستخدام
  const sort = searchParams.get('sort');
  const filter = searchParams.get('filter');
  
  router.push('/about');
  router.refresh();
  router.prefetch('/products');
}

الحاجات الجديدة:

• ✅ usePathname() - تجيب المسار الحالي
• ✅ useSearchParams() - للتعامل مع Query Parameters
• ✅ useParams() - لجلب Dynamic Route Parameters
• ✅ router.refresh() - لتحديث البيانات من السيرفر

🧾 SEO و Metadata: أسهل وأقوى#

Pages Router:#

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="Page description" />
        <meta property="og:image" content="/image.jpg" />
      </Head>
      <div>Content</div>
    </>
  );
}

App Router: Metadata API#

// Static Metadata
export const metadata = {
  title: 'My Page Title',
  description: 'Page description',
  openGraph: {
    images: ['/image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
  },
};

export default function Page() {
  return <div>Content</div>;
}

// Dynamic Metadata
export async function generateMetadata({ params }) {
  const { id } = await params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then(r => r.json());
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.image],
    },
  };
}

الفوايد:

• ✅ مفيش Import للـ Head
• ✅ أسهل وأنظف
• ✅ Type-safe مع TypeScript
• ✅ Dynamic Metadata سهلة

🧳 نظام الكاش في App Router: فهم عميق لكل المستويات#

النظام ده معقد شوية لكن فهمه مهم جداً عشان تعرف تتحكم في الأداء. في Next.js App Router في 4 مستويات كاش مختلفة:

┌─────────────────────────────────────────────────┐
│         Next.js Caching System                  │
├─────────────────────────────────────────────────┤
│  1. Request Memoization (في نفس الـ Render)    │
│  2. Data Cache (Server-side - دائم)            │
│  3. Full Route Cache (Server-side - HTML/RSC)  │
│  4. Router Cache (Client-side - في المتصفح)    │
└─────────────────────────────────────────────────┘

المستوى 1: Request Memoization - تخزين مؤقت لنفس الـ Request#

الفكرة: لو عملت نفس الـ fetch() أكتر من مرة في نفس الـ Request (نفس الـ Render)، Next.js بيستخدم نفس النتيجة.

// app/page.js
async function Header() {
  // Request #1
  const user = await fetch('https://api.example.com/user/123')
    .then(r => r.json());
  return <div>مرحباً {user.name}</div>;
}

async function Sidebar() {
  // Request #2 - نفس الـ URL!
  const user = await fetch('https://api.example.com/user/123')
    .then(r => r.json());
  return <div>البريد: {user.email}</div>;
}

async function Profile() {
  // Request #3 - نفس الـ URL!
  const user = await fetch('https://api.example.com/user/123')
    .then(r => r.json());
  return <div>العمر: {user.age}</div>;
}

export default function Page() {
  return (
    <>
      <Header />
      <Sidebar />
      <Profile />
    </>
  );
}

اللي بيحصل:

• Request #1: بيعمل Fetch فعلي ← ✅
• Request #2: مش بيعمل Fetch تاني! بيستخدم نتيجة Request #1 ← ⚡ سريع!
• Request #3: كمان مش بيعمل Fetch! نفس النتيجة ← ⚡ سريع!

النتيجة: بدل 3 requests → request واحد بس!

متى ينفع؟

• ✅ Server Components فقط
• ✅ نفس الـ GET request
• ✅ نفس الـ URL بالظبط
• ✅ في نفس الـ Component Tree

متى لا ينفع؟

• ❌ Client Components
• ❌ POST/PUT/DELETE requests
• ❌ URLs مختلفة
• ❌ Requests مختلفة

لو عايز تعطله:

// استخدم AbortController مع signal مختلفة
const data = await fetch(url, {
  signal: AbortSignal.timeout(5000),
  cache: 'no-store' // ده بيعطل Data Cache، مش Request Memoization
});

المستوى 2: Data Cache - التخزين الدائم على السيرفر#

الفكرة: النتائج بتتخزن على السيرفر حتى بعد الـ Request ينتهي. يعني لو 100 user زاروا الصفحة، بيستخدموا نفس الـ Cache.

// Cache دائم (افتراضي)
const posts = await fetch('https://api.example.com/posts', {
  cache: 'force-cache' // الافتراضي
}).then(r => r.json());

Timeline:

Request 1 (User A - 10:00 AM):
  → Fetch من API ← يخزن في Cache
  
Request 2 (User B - 10:05 AM):
  → يجيب من Cache (مش من API!)
  
Request 3 (User C - 11:00 AM):
  → يجيب من Cache (مش من API!)
  
... إلخ (كل الـ Requests تستخدم نفس الـ Cache)

أنواع الـ Data Cache:

1. Cache دائم (Static)#

const data = await fetch('https://api.example.com/about', {
  cache: 'force-cache' // افتراضي - Cache دائم
});

متى تستخدمه: بيانات مش بتتغير أبداً (صفحة “من نحن”، شروط الاستخدام…)

2. بدون Cache (Dynamic)#

const data = await fetch('https://api.example.com/live-data', {
  cache: 'no-store' // بدون cache - كل request جديد
});

متى تستخدمه: بيانات بتتغير كل ثانية (الأسهم، الأسعار المباشرة، عدادات…)

مثال:

// app/stock/[symbol]/page.js
async function StockPage({ params }) {
  const { symbol } = await params;
  
  // أسعار الأسهم = No Cache (بتتغير كل ثانية)
  const price = await fetch(
    `https://api.stocks.com/price/${symbol}`,
    { cache: 'no-store' }
  ).then(r => r.json());
  
  return (
    <div>
      <h1>{symbol}</h1>
      <p className="price">{price.current} جنيه</p>
      <p className="change" style={{ color: price.change > 0 ? 'green' : 'red' }}>
        {price.change > 0 ? '↑' : '↓'} {price.changePercent}%
      </p>
    </div>
  );
}

3. Time-based Revalidation (ISR)#

const data = await fetch('https://api.example.com/news', {
  next: { revalidate: 300 } // تحديث كل 5 دقائق
});

إزاي بتشتغل:

10:00 AM - Request 1:
  → Fetch من API ← يخزن في Cache (صالح لـ 5 دقائق)
  
10:02 AM - Request 2:
  → يجيب من Cache ✅ (لسه صالح)
  
10:06 AM - Request 3 (بعد 5 دقائق):
  → يجيب من Cache القديم ✅ (المستخدم مستنيش)
  → في الخلفية: Fetch جديد من API 🔄
  
10:07 AM - Request 4:
  → يجيب من Cache الجديد ✅

الفايدة: المستخدم دايماً بيشوف محتوى سريع، والبيانات بتتحدث في الخلفية.

مثال واقعي:

// app/news/page.js
async function NewsPage() {
  // الأخبار الرئيسية - تحديث كل 5 دقائق
  const headlines = await fetch('https://api.news.com/headlines', {
    next: { revalidate: 300 }
  }).then(r => r.json());
  
  // المقالات الشائعة - تحديث كل ساعة
  const trending = await fetch('https://api.news.com/trending', {
    next: { revalidate: 3600 }
  }).then(r => r.json());
  
  return (
    <div>
      <section>
        <h2>العناوين الرئيسية</h2>
        {headlines.map(article => (
          <article key={article.id}>{article.title}</article>
        ))}
      </section>
      
      <aside>
        <h2>الأكثر قراءة</h2>
        {trending.map(article => (
          <article key={article.id}>{article.title}</article>
        ))}
      </aside>
    </div>
  );
}

export default NewsPage;

4. Tag-based Revalidation (On-Demand)#

الفكرة: عايز تحدث البيانات بناءً على حدث (مش وقت محدد).

// app/posts/[id]/page.js
async function PostPage({ params }) {
  const { id } = await params;
  
  const post = await fetch(`https://api.example.com/posts/${id}`, {
    next: { 
      tags: ['posts', `post-${id}`] // Tags للتحديث
    }
  }).then(r => r.json());
  
  return <article>{post.content}</article>;
}

التحديث On-Demand:

// app/api/revalidate/route.js
import { revalidateTag, revalidatePath } from 'next/cache';

export async function POST(request) {
  const { type, value } = await request.json();
  
  if (type === 'tag') {
    // تحديث كل الصفحات اللي عليها الـ tag ده
    revalidateTag(value);
  }
  
  if (type === 'path') {
    // تحديث صفحة معينة
    revalidatePath(value);
  }
  
  return Response.json({ revalidated: true, now: Date.now() });
}

مثال واقعي - CMS:

// Webhook من الـ CMS
// لما المحرر يعدل مقال:

// POST /api/revalidate
// { "type": "tag", "value": "post-123" }

// → الصفحة بتتحدث فوراً!

مثال كامل:

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  const posts = await fetch('https://cms.example.com/posts', {
    next: { tags: ['all-posts'] }
  }).then(r => r.json());
  
  return posts.map(post => ({ slug: post.slug }));
}

async function BlogPost({ params }) {
  const { slug } = await params;
  
  const post = await fetch(`https://cms.example.com/posts/${slug}`, {
    next: { 
      tags: ['posts', `post-${slug}`],
      revalidate: 3600 // كمان ISR كـ backup (كل ساعة)
    }
  }).then(r => r.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

export default BlogPost;

// لما المحرر يعدل المقال "my-first-post":
// POST /api/revalidate
// { "type": "tag", "value": "post-my-first-post" }
// → الصفحة تتحدث فوراً بدون ما المستخدم يعمل hard refresh!

المستوى 3: Full Route Cache - تخزين HTML كامل#

الفكرة: Next.js بتخزن الصفحة كاملة (HTML + RSC Payload) على السيرفر.

للصفحات Static:

// app/about/page.js
export default function About() {
  return <div>من نحن</div>;
}

// Next.js بتولد HTML مرة واحدة في الـ Build:
// .next/server/app/about.html ← جاهز!

التحكم في Route Cache:

// 1. Cache دائم (افتراضي للـ Static Routes)
export const dynamic = 'force-static';

// 2. بدون Cache (Dynamic)
export const dynamic = 'force-dynamic';

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

// 4. Auto (Next.js تقرر)
export const dynamic = 'auto';

مثال:

// app/products/page.js
// الصفحة Static - بتتبني مرة واحدة
export const revalidate = 600; // تحديث كل 10 دقائق

async function ProductsPage() {
  const products = await fetch('https://api.shop.com/products').then(r => r.json());
  
  return (
    <div className="products-grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>{product.price} جنيه</p>
        </div>
      ))}
    </div>
  );
}

export default ProductsPage;

اللي بيحصل:

1. أول Build: Next.js بتنفذ المكون وتولد HTML
2. Requests التالية: بتبعت HTML الجاهز فوراً (أسرع حاجة!)
3. بعد 10 دقائق: بتحدث الـ HTML في الخلفية
4. Requests الجديدة: بتاخد HTML المحدث

المستوى 4: Router Cache (Client-side) - في المتصفح#

الفكرة: لما تتنقل بين الصفحات في المتصفح، Next.js بتخزن الصفحات اللي زرتها.

// المستخدم زار: / → /about → /blog
// Router Cache دلوقتي فيه:
{
  '/': { ... },
  '/about': { ... },
  '/blog': { ... }
}

// لو رجع لـ / ← فوري! (من Cache)

المدة الافتراضية:

• Static Routes: 5 دقائق
• Dynamic Routes: 30 ثانية

التحكم في Router Cache:

'use client';
import { useRouter } from 'next/navigation';

function MyComponent() {
  const router = useRouter();
  
  return (
    <>
      {/* تحديث البيانات من السيرفر */}
      <button onClick={() => router.refresh()}>
        تحديث
      </button>
      
      {/* مسح الـ Cache كله */}
      <button onClick={() => {
        router.refresh();
        // أو استخدم window.location.reload() للـ hard refresh
      }}>
        تحديث كامل
      </button>
    </>
  );
}

جدول مقارنة شامل: مستويات الكاش الأربعة#

سيناريو كامل: رحلة Request في النظام#

السيناريو: User A يفتح /blog/my-post لأول مرة

┌────────────────────────────────────────────────────────┐
│  User A → /blog/my-post (أول مرة)                     │
└────────────────────────────────────────────────────────┘
           ↓
    [Router Cache (Client)]
    ❌ مفيش - أول مرة
           ↓
    Request → Next.js Server
           ↓
    [Full Route Cache (Server)]
    ❌ مفيش (لو Dynamic) أو
    ✅ موجود (لو Static)
           ↓
    [Execute Server Components]
           ↓
    [Data Cache (Server)]
      fetch('api.com/posts/my-post')
      ❌ مفيش → Fetch من API
      ✅ يخزن في Cache
           ↓
    [Request Memoization]
      لو نفس الـ fetch اتكرر في نفس الـ Render
      ✅ يستخدم نفس النتيجة
           ↓
    HTML + RSC → Browser
           ↓
    [Router Cache (Client)]
    ✅ يخزن الصفحة

User B يفتح نفس الصفحة بعد دقيقة:

┌────────────────────────────────────────────────────────┐
│  User B → /blog/my-post (بعد دقيقة)                   │
└────────────────────────────────────────────────────────┘
           ↓
    Request → Next.js Server
           ↓
    [Full Route Cache]
    ✅ موجود (لو Static)
      → بعت HTML فوراً ⚡⚡⚡
    
    أو
    
    [Data Cache]
    ✅ موجود → استخدمه
      → Generate HTML
      → بعت للـ Browser ⚡⚡

User A يرجع لنفس الصفحة (في نفس الـ Session):

┌────────────────────────────────────────────────────────┐
│  User A → back to /blog/my-post                        │
└────────────────────────────────────────────────────────┘
           ↓
    [Router Cache (Client)]
    ✅ موجود!
      → عرض فوري بدون Request ⚡⚡⚡⚡

متى تستخدم إيه؟ Decision Tree#

هل البيانات بتتغير؟
├─ لا (ثابتة)
│  └─ force-cache (افتراضي)
│     مثال: صفحة "من نحن"
│
├─ آه، بس نادراً (مرة في اليوم/الأسبوع)
│  └─ force-cache + revalidateTag
│     مثال: صفحات CMS
│
├─ آه، بانتظام (كل ساعة/يوم)
│  └─ revalidate: [seconds]
│     مثال: مدونة، أخبار
│
├─ آه، باستمرار (كل دقائق)
│  └─ revalidate: 60-300
│     مثال: منتديات، تعليقات
│
└─ آه، فوراً (real-time)
   └─ cache: 'no-store'
      مثال: أسعار، stocks، chat

مثال شامل: متجر إلكتروني#

// app/products/page.js
// قائمة المنتجات - ISR (تحديث كل 10 دقائق)
export const revalidate = 600;

async function ProductsPage() {
  const products = await fetch('https://api.shop.com/products', {
    next: { tags: ['products'] }
  }).then(r => r.json());
  
  return (/* ... */);
}

// app/products/[id]/page.js
// صفحة منتج معين - ISR + Tags
export const revalidate = 1800; // 30 دقيقة

async function ProductPage({ params }) {
  const { id } = await params;
  
  // المنتج - مع Tag للتحديث on-demand
  const product = await fetch(`https://api.shop.com/products/${id}`, {
    next: { 
      tags: ['products', `product-${id}`],
      revalidate: 1800
    }
  }).then(r => r.json());
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price} جنيه</p>
      
      {/* المراجعات - تحديث أسرع */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
    </div>
  );
}

async function Reviews({ productId }) {
  // المراجعات - تحديث كل 5 دقائق
  const reviews = await fetch(
    `https://api.shop.com/products/${productId}/reviews`,
    { next: { revalidate: 300 } }
  ).then(r => r.json());
  
  return (/* ... */);
}

// app/cart/page.js
// سلة المشتريات - Dynamic (user-specific)
import { cookies } from 'next/headers';

export const dynamic = 'force-dynamic';

async function CartPage() {
  const cookieStore = await cookies();
  const userId = cookieStore.get('userId');
  
  // بدون cache - البيانات خاصة بكل مستخدم
  const cart = await fetch(`https://api.shop.com/cart/${userId}`, {
    cache: 'no-store'
  }).then(r => r.json());
  
  return (/* ... */);
}

// app/api/revalidate/route.js
// لما المنتج يتعدل في الـ Admin Panel
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const { productId } = await request.json();
  
  // تحديث المنتج المعين
  revalidateTag(`product-${productId}`);
  
  // تحديث قائمة المنتجات
  revalidateTag('products');
  
  return Response.json({ revalidated: true });
}

في Pages Router: مكنش فيه المرونة دي! كنت بتختار بين Static أو SSR أو ISR بس، ومفيش Tag-based revalidation.

🎯 Parallel Routes و Intercepting Routes: ميزات متقدمة شوية#

Parallel Routes#

عرض أكتر من Route في نفس الوقت:

app/
├── layout.js
├── @team/
│   └── page.js
├── @analytics/
│   └── page.js
└── page.js

// app/layout.js
export default function Layout({ children, team, analytics }) {
  return (
    <div>
      <div>{children}</div>
      <div className="sidebar">
        {team}
        {analytics}
      </div>
    </div>
  );
}

Intercepting Routes#

فتح Modal من غير تغيير الـ URL:

app/
├── photos/
│   ├── page.js
│   └── [id]/
│       └── page.js
└── @modal/
    └── (.)photos/
        └── [id]/
            └── page.js

النتيجة: لما تكليك على صورة، بتفتح في Modal، لكن لو refresh الصفحة بتفتح الصفحة الكاملة!

🛡️ Route Handlers: API Routes الجديدة#

Pages Router:#

// pages/api/posts.js
import { db } from '@/lib/db'; // مثال: Prisma, Drizzle, إلخ

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const posts = await db.post.findMany();
    res.status(200).json(posts);
  }
}

App Router:#

// app/api/posts/route.js
import { db } from '@/lib/db'; // مثال: Prisma, Drizzle, إلخ

export async function GET(request) {
  const posts = await db.post.findMany();
  return Response.json(posts);
}

export async function POST(request) {
  const body = await request.json();
  const newPost = await db.post.create({
    data: body
  });
  return Response.json(newPost, { status: 201 });
}

export async function DELETE(request) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get('id');
  await db.post.delete({
    where: { id }
  });
  return new Response(null, { status: 204 });
}

الفوايد:

• ✅ Web Standards (Request/Response API)
• ✅ أوضح وأسهل
• ✅ دعم أفضل للـ Streaming

🔄 التحديث من Pages لـ App Router: خطوة بخطوة#

مش لازم تبدأ من الصفر!#

Next.js بيسمحلك تشتغل بـ الاتنين مع بعض:

my-app/
├── pages/           ← Pages Router القديم
│   ├── index.js
│   └── about.js
├── app/             ← App Router الجديد
│   ├── layout.js
│   ├── page.js
│   └── blog/
│       └── page.js

خطوات التحديث:#

1. إنشاء Root Layout#

// app/layout.js
export const metadata = {
  title: 'My App',
};

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>{children}</body>
    </html>
  );
}

2. نقل صفحة بسيطة#

قبل (Pages Router):

// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

بعد (App Router):

// app/about/page.js
export const metadata = {
  title: 'About',
};

export default function About() {
  return <div>About Page</div>;
}

3. نقل صفحة فيها Data Fetching#

قبل:

// pages/posts.js
export async function getServerSideProps() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return { props: { posts } };
}

export default function Posts({ posts }) {
  return <div>{posts.map(p => <div key={p.id}>{p.title}</div>)}</div>;
}

بعد:

// app/posts/page.js
async function Posts() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }
  }).then(r => r.json());
  
  return <div>{posts.map(p => <div key={p.id}>{p.title}</div>)}</div>;
}

export default Posts;

4. نقل صفحة فيها State/Events#

// app/counter/page.js
'use client'; // مهم جدًا!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

5. نقل Dynamic Routes#

قبل:

// pages/posts/[slug].js
export async function getStaticPaths() {
  return {
    paths: [{ params: { slug: 'post-1' } }],
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());
  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

بعد:

// app/posts/[slug]/page.js
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map(post => ({ slug: post.slug }));
}

async function Post({ params }) {
  const { slug } = await params;
  const post = await fetch(`https://api.example.com/posts/${slug}`).then(r => r.json());
  return <div>{post.title}</div>;
}

export default Post;

⚔️ مقارنة شاملة: Pages Router vs App Router#

🎓 نصائح مهمة للـ App Router#

1. استخدم Server Components أكتر ما تقدر#

// ✅ Good: Server Component
import { db } from '@/lib/db'; // مثال: Prisma, Drizzle, إلخ

async function PostsList() {
  const posts = await db.post.findMany();
  return <div>{posts.map(p => <Post key={p.id} post={p} />)}</div>;
}

// ❌ Bad: Client Component بدون داعي
'use client';
import { useEffect, useState } from 'react';

function PostsList() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(r => r.json())
      .then(setPosts);
  }, []);
  return <div>{posts.map(p => <Post key={p.id} post={p} />)}</div>;
}

2. استخدم Suspense Boundaries عشان Loading States#

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Header />
      <Suspense fallback={<PostsSkeleton />}>
        <Posts />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        <Comments />
      </Suspense>
    </div>
  );
}

3. استفيد من جلب البيانات بالتوازي#

// ✅ Good: Parallel
async function Page() {
  const [posts, users] = await Promise.all([
    fetch('https://api.example.com/posts').then(r => r.json()),
    fetch('https://api.example.com/users').then(r => r.json()),
  ]);
  
  return <div>...</div>;
}

// ❌ Bad: Sequential
async function Page() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  const users = await fetch('https://api.example.com/users').then(r => r.json());
  
  return <div>...</div>;
}

4. خلي Client Components في الأوراق (Leaves) - يعني في آخر الشجرة#

// ✅ Good Architecture
// app/posts/page.js (Server)
import { db } from '@/lib/db'; // مثال: Prisma, Drizzle, إلخ

async function PostsPage() {
  const posts = await db.post.findMany();
  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

// app/posts/PostCard.js (Server)
function PostCard({ post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <LikeButton postId={post.id} />
    </article>
  );
}

// app/posts/LikeButton.js (Client)
'use client';
import { useState } from 'react';

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}