Rendering (SSR, SSG, ISR)

// app/about/page.tsx — no dynamic data → static HTML at build
export default function About() {
  return <h1>About Us</h1>
}

// fetch with force-cache → treated as static
export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache',
  }).then(r => r.json())

  return <div>{data.title}</div>
}

import { cookies, headers } from 'next/headers'

export default async function Dashboard() {
  const cookieStore = await cookies()          // → dynamic
  const user = await getUser(cookieStore.get('session')?.value)
  return <div>Hello {user.name}</div>
}

// Force a route to always be dynamic (SSR every request)
export const dynamic = 'force-dynamic'

// Force a route to be static (errors if dynamic APIs are used)
export const dynamic = 'error'

// Force static even if dynamic APIs detected (use carefully)
export const dynamic = 'force-static'

// app/products/page.tsx
export const revalidate = 60   // revalidate at most every 60 seconds

export default async function Products() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  }).then(r => r.json())

  return <ul>{products.map((p: Product) => <li key={p.id}>{p.name}</li>)}</ul>
}

// app/api/revalidate/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(request: NextRequest) {
  const { path, tag, secret } = await request.json()

  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  if (path) revalidatePath(path)
  if (tag) revalidateTag(tag)

  return NextResponse.json({ revalidated: true, now: Date.now() })
}

// Tag a fetch so it can be invalidated
const posts = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
}).then(r => r.json())

// Invalidate from an action
revalidateTag('posts')

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())

  return posts.map((post: Post) => ({ slug: post.slug }))
  // returns: [{ slug: 'hello-world' }, { slug: 'next-js-guide' }, ...]
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await fetchPost(slug)
  return <article>{post.body}</article>
}

// app/docs/[...slug]/page.tsx
export async function generateStaticParams() {
  return [
    { slug: ['getting-started'] },
    { slug: ['api', 'reference'] },
  ]
}

export const dynamicParams = true    // (default) render on demand and cache
export const dynamicParams = false   // 404 for any path not pre-generated

// next.config.ts (Next 15)
export default {
  experimental: { ppr: 'incremental' }
}

// app/page.tsx
import { Suspense } from 'react'
import { StaticHero } from '@/components/static-hero'   // static
import { DynamicFeed } from '@/components/dynamic-feed' // dynamic

export const experimental_ppr = true

export default function Home() {
  return (
    <>
      <StaticHero />                         {/* baked into static shell */}
      <Suspense fallback={<FeedSkeleton />}>
        <DynamicFeed />                      {/* streamed after */}
      </Suspense>
    </>
  )
}

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

export default function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>  {/* immediate */}

      <Suspense fallback={<RevenueCardSkeleton />}>
        <RevenueCard />    {/* streams when ready */}
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />   {/* streams independently */}
      </Suspense>
    </main>
  )
}

// At the top of any page.tsx, layout.tsx, or route.ts

export const dynamic = 'auto'          // (default) infer from usage
export const dynamic = 'force-dynamic' // SSR on every request
export const dynamic = 'force-static'  // static; dynamic APIs return defaults
export const dynamic = 'error'         // static; throw if dynamic APIs used

export const revalidate = false        // cache forever (default for static)
export const revalidate = 0            // no cache (dynamic)
export const revalidate = 60           // revalidate every 60s (ISR)

export const fetchCache = 'auto'       // default Next.js behavior
export const fetchCache = 'only-cache' // all fetches must be cacheable
export const fetchCache = 'force-cache'
export const fetchCache = 'force-no-store'

export const runtime = 'nodejs'        // (default) full Node.js APIs
export const runtime = 'edge'          // Edge Runtime (faster cold start)

export const preferredRegion = 'auto'
export const preferredRegion = 'home'  // deploy to closest region to DB

export const maxDuration = 60          // max serverless execution seconds

import { unstable_noStore as noStore } from 'next/cache'

export async function getLatestInvoices() {
  noStore()   // equivalent to cache: 'no-store' on the enclosing fetch
  const data = await sql`SELECT * FROM invoices ORDER BY date DESC LIMIT 5`
  return data.rows
}