معماری اکوسیستم‌های وب Headless: جداسازی بک‌اندهای CMS مونولیتیک با Next.js و APIهای REST/GraphQL

سنتی (مونولیتیک):
  CMS = مدیریت محتوا + رندر + ارائه

Headless:
  CMS = مدیریت محتوا (بک‌اند)
  فرانت‌اند = رندر + ارائه (جدا شده)
  API = قرارداد بین آن‌ها

┌─────────────────────────────────────────────────────────────────────────────┐
│                           منابع محتوا                                       │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────────────────┐  │
│  │  CMS WordPress  │  │  CMS Headless   │  │  APIهای خارجی               │  │
│  │  (REST/GraphQL) │  │  (Contentful،   │  │  (CRM، ERP، تجارت)          │  │
│  │                 │  │   Sanity و...)  │  │                             │  │
│  └────────┬────────┘  └────────┬────────┘  └──────────────┬──────────────┘  │
└───────────┼────────────────────┼──────────────────────────┼─────────────────┘
            │                    │                          │
            ▼                    ▼                          ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         لایه API Gateway / BFF                              │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │  کش │ محدودیت نرخ │ احراز هویت │ شکل‌دهی پاسخ │ مدیریت خطا           │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
            │
            ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         لایه ارائه Next.js                                  │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │  SSG (استاتیک) │ ISR (افزایشی) │ SSR (پویا) │ CSR (کلاینت)            │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │  بهینه‌سازی تصویر │ Route Handlerها │ Middleware │ Edge Functions    │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
            │
            ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         لایه CDN / Edge                                     │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │  کش جهانی │ رندر لبه │ محافظت DDoS │ WAF                              │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
            │
            ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                              کاربران                                        │
│         وب │ موبایل │ تبلت │ هر کلاینت                                      │
└─────────────────────────────────────────────────────────────────────────────┘

آیا محتوا برای همه کاربران یکسان است؟
  ├─ بله → آیا مکرراً به‌روزرسانی می‌شود؟
  │         ├─ خیر → SSG
  │         └─ بله → ISR
  └─ خیر → آیا نیازمند احراز هویت است؟
            ├─ خیر → SSR (با کش)
            └─ بله → ترکیبی SSR + CSR

// pages/blog/[slug].tsx
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  
  return {
    props: { post },
    revalidate: 60, // حداکثر هر ۶۰ ثانیه بازتولید شود
  };
}

export async function getStaticPaths() {
  const posts = await fetchAllPostSlugs();
  
  return {
    paths: posts.map(slug => ({ params: { slug } })),
    fallback: 'blocking', // نوشته‌های جدید در اولین درخواست رندر می‌شوند
  };
}

// pages/api/revalidate.ts
export default async function handler(req, res) {
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'توکن نامعتبر' });
  }
  
  try {
    await res.revalidate(`/blog/${req.query.slug}`);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('خطا در Revalidation');
  }
}

REST:    برای منابع ساده و قابل کش (تصاویر، Sitemap، داده استاتیک)
GraphQL: برای پرس‌وجوهای پیچیده و رابطه‌ای (ترکیب صفحه، محتوای تودرتو)

query GetPostWithAuthor($slug: String!) {
  post(slug: $slug) {
    title
    content
    publishedAt
    author {
      name
      avatar
    }
    categories {
      name
      slug
    }
    seo {
      metaTitle
      metaDescription
      ogImage
    }
  }
}

# Nginx: محدود کردن /wp-json/ به مصرف‌کنندگان شناخته‌شده
location /wp-json/ {
    allow 10.0.0.0/8;      # شبکه داخلی
    allow 203.0.113.0/24;  # IPهای خروجی CDN
    deny all;
}

// Middleware: تأیید توکن API
export function middleware(request: NextRequest) {
  const token = request.headers.get('Authorization');
  
  if (!isValidToken(token)) {
    return new NextResponse('غیرمجاز', { status: 401 });
  }
  
  return NextResponse.next();
}

// محدودیت نرخ در لبه
const rateLimit = new RateLimiter({
  windowMs: 60 * 1000, // ۱ دقیقه
  max: 100,            // ۱۰۰ درخواست در دقیقه
});

// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; img-src 'self' cdn.example.com; script-src 'self'",
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
];

┌─────────────────────────────────────────────────────────────────────────────┐
│                         لایه‌های کش                                         │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  لایه ۱: کش مرورگر                                                         │
│  ─────────────────────────                                                  │
│  دارایی‌های استاتیک: CSS، JS، تصاویر، فونت‌ها                              │
│  Cache-Control: public, max-age=31536000, immutable                         │
│                                                                             │
│  لایه ۲: کش لبه CDN                                                        │
│  ─────────────────────────                                                  │
│  صفحات HTML (SSG/ISR)، پاسخ‌های API                                        │
│  Cache-Control: public, s-maxage=60, stale-while-revalidate=300             │
│                                                                             │
│  لایه ۳: کش مبدأ (Next.js)                                                 │
│  ─────────────────────────                                                  │
│  صفحات ISR، کش API Route                                                   │
│  revalidate: 60                                                             │
│                                                                             │
│  لایه ۴: کش CMS                                                            │
│  ─────────────────────────                                                  │
│  کش شیء (Redis)، کش پرس‌وجو، کش صفحه                                       │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

// API Route Next.js: کش پاسخ‌های محتوا
export async function GET() {
  const data = await fetchContent();
  
  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
    },
  });
}

محتوا منتشر شد → Webhook CMS → API Revalidate Next.js → Purge CDN → محتوای تازه

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="قهرمان"
  width={1200}
  height={600}
  priority  // پیش‌بارگذاری تصویر LCP
  sizes="(max-width: 768px) 100vw, 50vw"
/>

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />  {/* وقتی آماده شد، Stream می‌شود */}
      </Suspense>
    </>
  );
}

import Link from 'next/link';

<Link href="/about" prefetch={true}>
  درباره
</Link>