Vercel vs Cloudflare (Workers + Pages) مقارنة

// Vercel — Next.js 16 App Router، مكوّنات Cache (PPR افتراضي) + purge عند الطلب
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

// app/blog/[slug]/page.tsx — بيانات مخزَّنة مؤقتًا عبر 'use cache' + cacheTag
import { cacheTag } from "next/cache";

async function getPost(slug: string) {
  "use cache";
  cacheTag(`post-${slug}`);
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

// app/api/revalidate/route.ts — purge عند الطلب (Vercel Data Cache)
// "max" = stale-while-revalidate؛ للإسقاط الفوري في webhook استخدم { expire: 0 }
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { slug } = await req.json();
  revalidateTag(`post-${slug}`, "max");
  return NextResponse.json({ revalidated: true });
}

// vercel.json — تفضيل المنطقة ومدة الدالة
{
  "regions": ["fra1"],
  "functions": {
    "app/api/revalidate/route.ts": { "maxDuration": 10 }
  }
}

// نشر (Deploy)
// $ vercel --prod

// Cloudflare — نشر Next.js 16 على Workers (vinext، الطريق الرسمي الافتراضي)
// 1) قِس التوافق أولًا، ثم أضفه للمشروع (vinext init يُنشئ إعداد Vite)
// $ npx vinext check
// $ npx vinext init

// vite.config.ts — Workers Cache لـ ISR على مستوى route، وKV لتخزين البيانات المؤقت
import { cloudflare } from "@cloudflare/vite-plugin";
import { cdnAdapter } from "@vinext/cloudflare/cache/cdn-adapter";
import { kvDataAdapter } from "@vinext/cloudflare/cache/kv-data-adapter";
import { defineConfig } from "vite";
import vinext from "vinext";

export default defineConfig({
  plugins: [
    vinext({
      // يعمل cdnAdapter فقط عندما يكون "cache": { "enabled": true } في wrangler.jsonc
      cache: { cdn: cdnAdapter(), data: kvDataAdapter() },
    }),
    cloudflare({
      viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] },
    }),
  ],
});

// نشر — يُنشئ تهيئة Worker بنفسه
// $ npx @vinext/cloudflare deploy

// بديل: محول OpenNext — open-next.config.ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";

export default defineCloudflareConfig({ incrementalCache: r2IncrementalCache });
// $ opennextjs-cloudflare build && opennextjs-cloudflare deploy

// Access for Workers — ربط Worker بتطبيق Access
// POST /accounts/{account_id}/access/apps
// "destinations": [{ "type": "worker", "worker_id": "<worker-id>" }]