"Next.js 16 والعرض: SSG و ISR و SSR—اختر سمك"

// app/blog/page.tsx
export const dynamic = 'force-static'
export const revalidate = false

async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache'
  })
  return res.json()
}

export default async function BlogPage() {
  const posts = await getPosts()
  return (
    <div>
      <h1>مقالات المدونة</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

// app/products/page.tsx
export const dynamic = 'auto'
export const revalidate = 3600 // إعادة التحقق كل ساعة

async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }
  })
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()
  return (
    <div>
      <h1>المنتجات</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  )
}

// app/products/page.tsx
import { unstable_cache } from 'next/cache'
import { db } from '@/lib/db'

const getCachedProducts = unstable_cache(
  async () => {
    return await db.select().from('products').limit(10)
  },
  ['products'],
  { revalidate: 3600, tags: ['products'] }
)

export default async function ProductsPage() {
  const products = await getCachedProducts()
  return (
    <div>
      <h1>المنتجات</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  )
}

// app/dashboard/page.tsx
export const dynamic = 'force-dynamic'
export const revalidate = 0

async function getUserData(userId: string) {
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store'
  })
  return res.json()
}

export default async function DashboardPage() {
  const user = await getUserData('current-user')
  return (
    <div>
      <h1>مرحبًا، {user.name}</h1>
      <p>آخر تحديث: {new Date().toLocaleString('ar-SA')}</p>
    </div>
  )
}

// app/orders/page.tsx
import { db } from '@/lib/db'

async function getUserOrders(userId: string) {
  return await db
    .select()
    .from('orders')
    .where('userId', '=', userId)
}

export default async function OrdersPage() {
  const orders = await getUserOrders('current-user')
  return (
    <div>
      <h1>طلباتك</h1>
      <ul>
        {orders.map((order) => (
          <li key={order.id}>
            الطلب #{order.id} - {order.total} ريال
          </li>
        ))}
      </ul>
    </div>
  )
}

// app/blog/page.tsx
export const dynamic = "force-static";
export const revalidate = false;

// app/products/page.tsx
export const dynamic = "auto";
export const revalidate = 3600;

// app/dashboard/page.tsx
export const dynamic = "force-dynamic";
export const revalidate = 0;

// app/blog/[slug]/page.tsx
export const dynamic = 'force-static'

async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    cache: 'force-cache'
  })
  return res.json()
}

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(
    (res) => res.json()
  )

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    description: post.excerpt,
  }
}

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

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

// app/products/[id]/page.tsx
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = 3600

async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 3600, tags: ['product'] }
  })
  return res.json()
}

export async function generateStaticParams() {
  // عرض مسبق للمنتجات الشهيرة بس
  const products = await fetch('https://api.example.com/products?popular=true').then(
    (res) => res.json()
  )

  return products.map((product) => ({
    id: product.id.toString(),
  }))
}

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const product = await getProduct(id)

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price} ريال</p>
      <p>{product.description}</p>
    </div>
  )
}

// app/orders/[orderId]/page.tsx
export const dynamic = 'force-dynamic'
export const dynamicParams = true

async function getOrder(orderId: string) {
  const res = await fetch(`https://api.example.com/orders/${orderId}`, {
    cache: 'no-store'
  })
  return res.json()
}

export default async function OrderPage({ params }: { params: Promise<{ orderId: string }> }) {
  const { orderId } = await params
  const order = await getOrder(orderId)

  return (
    <div>
      <h1>الطلب #{order.id}</h1>
      <p>الحالة: {order.status}</p>
      <p>الإجمالي: {order.total} ريال</p>
      <p>آخر تحديث: {new Date().toLocaleString('ar-SA')}</p>
    </div>
  )
}

// app/blog/[slug]/page.tsx
export const dynamic = "auto";
export const dynamicParams = false; // إرجع 404 للمقالات غير المعروفة

export async function generateStaticParams() {
  const posts = await fetch("https://api.example.com/posts").then((res) =>
    res.json(),
  );

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/* رأس ثابت - SSG */}
        <Header />

        {/* محتوى ديناميكي - SSR */}
        {children}

        {/* شريط جانبي مخزن مؤقتاً - ISR */}
        <Sidebar />
      </body>
    </html>
  )
}