Next.js App Router動的再検証ガイド

+-----------------------------------------------------------------------------------+
| Next.js App Router Caching Sub-system Architecture                               |
+-----------------------------------------------------------------------------------+
| 1. Request Memoization  | Server request scope  | Deduplicates fetch calls in 1 render |
| 2. Data Cache          | Persistent server storage | Stores fetch responses across requests|
| 3. Full Route Cache    | Server build storage  | Stores HTML & RSC payloads for static |
| 4. Router Cache        | Client browser memory | Stores visited route segments in SPA  |
+-----------------------------------------------------------------------------------+

// app/products/[slug]/page.tsx
import { notFound } from 'next/navigation';

type Product = {
  id: string;
  slug: string;
  name: string;
  price: number;
  description: string;
  inventoryCount: number;
  category: string;
};

async function getProductData(slug: string): Promise<Product | null> {
  const response = await fetch(`https://api.example.com/products/${slug}`, {
    // Assign cache tags and define 1-hour background revalidation interval
    next: {
      tags: [`product:${slug}`, 'products', 'inventory'],
      revalidate: 3600
    }
  });

  if (response.status === 404) {
    return null;
  }

  if (!response.ok) {
    throw new Error('Failed to fetch product data from backend API.');
  }

  return response.json();
}

async function getRelatedProducts(category: string): Promise<Product[]> {
  const response = await fetch(`https://api.example.com/products?category=${category}`, {
    next: {
      tags: [`category:${category}`, 'products'],
      revalidate: 7200
    }
  });

  if (!response.ok) {
    return [];
  }

  return response.json();
}

export default async function ProductDetailPage({
  params
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = await getProductData(slug);

  if (!product) {
    notFound();
  }

  const related = await getRelatedProducts(product.category);

  return (
    <article className="product-page">
      <header className="product-header">
        <h1>{product.name}</h1>
        <p className="price">${product.price.toFixed(2)}</p>
        <p className="inventory">Available Stock: {product.inventoryCount}</p>
      </header>

      <section className="description-section">
        <p className="description">{product.description}</p>
      </section>

      <section className="related-section">
        <h2>Related Products in {product.category}</h2>
        <div className="related-grid">
          {related.map((item) => (
            <div key={item.id} className="related-card">
              <h3>{item.name}</h3>
              <p>${item.price.toFixed(2)}</p>
            </div>
          ))}
        </div>
      </section>
    </article>
  );
}

// Both Layout and Page components call getProductData('keyboard-v2')
// Request Memoization ensures ONLY ONE HTTP request is executed on the server!
export async function HeaderLayout({ children }: { children: React.ReactNode }) {
  const product = await getProductData('keyboard-v2');
  return (
    <div>
      <nav>Current Item: {product?.name}</nav>
      {children}
    </div>
  );
}

// lib/cachedQueries.ts
import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export const getCachedProductBySlug = (slug: string) =>
  unstable_cache(
    async () => {
      return db.product.findUnique({
        where: { slug }
      });
    },
    [`product-query-${slug}`], // Cache key array
    {
      tags: [`product:${slug}`, 'products'],
      revalidate: 3600
    }
  )();

// actions/inventoryActions.ts
'use server';

import { revalidateTag } from 'next/cache';
import { db } from '@/lib/database';

export async function updateProductInventory(
  productId: string,
  productSlug: string,
  newStockCount: number
) {
  try {
    await db.product.update({
      where: { id: productId },
      data: { inventoryCount: newStockCount }
    });

    // Instantly purge specific product tag and global inventory tag
    revalidateTag(`product:${productSlug}`);
    revalidateTag('inventory');

    return { success: true, message: 'Inventory updated and cache purged successfully!' };
  } catch (error) {
    return { success: false, message: 'Database write failed during inventory update.' };
  }
}

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

export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-webhook-secret');

  if (secret !== process.env.CMS_WEBHOOK_SECRET) {
    return NextResponse.json({ message: 'Unauthorized webhook request.' }, { status: 401 });
  }

  try {
    const body = await request.json();
    const { entityType, slug, tags } = body;

    if (tags && Array.isArray(tags)) {
      // Purge array of incoming webhook tags
      tags.forEach((tag: string) => revalidateTag(tag));
    } else if (slug) {
      revalidateTag(`${entityType}:${slug}`);
    } else {
      revalidateTag(entityType);
    }

    return NextResponse.json({
      revalidated: true,
      timestamp: new Date().toISOString()
    });
  } catch (err) {
    return NextResponse.json(
      { message: 'Error processing webhook revalidation payload.' },
      { status: 500 }
    );
  }
}

// components/InventoryUpdater.tsx
'use client';

import { useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { updateProductInventory } from '@/actions/inventoryActions';

type InventoryUpdaterProps = {
  productId: string;
  productSlug: string;
  initialStock: number;
};

export function InventoryUpdater({
  productId,
  productSlug,
  initialStock
}: InventoryUpdaterProps) {
  const router = useRouter();
  const [stock, setStock] = useState(initialStock);
  const [isPending, startTransition] = useTransition();

  const handleStockUpdate = async (newCount: number) => {
    setStock(newCount);

    startTransition(async () => {
      const result = await updateProductInventory(productId, productSlug, newCount);

      if (result.success) {
        // Force the client browser router cache to refresh fresh server RSC payload
        router.refresh();
      } else {
        // Rollback stock state on server write failure
        setStock(initialStock);
        alert(result.message);
      }
    });
  };

  return (
    <div className="stock-controls">
      <span>Current Inventory: {stock}</span>
      <button
        onClick={() => handleStockUpdate(stock + 1)}
        disabled={isPending}
      >
        + Add Stock
      </button>
      <button
        onClick={() => handleStockUpdate(Math.max(0, stock - 1))}
        disabled={isPending || stock === 0}
      >
        - Decrease Stock
      </button>
    </div>
  );
}

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

export default async function LiveDashboardPage() {
  // Page skips static route caching entirely and renders dynamically on every request
  return <div>Live Enterprise Analytics Stream</div>;
}

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  if (request.nextUrl.pathname.startsWith('/api/public')) {
    // Enforce Edge CDN caching headers for public API endpoints
    response.headers.set(
      'Cache-Control',
      'public, s-maxage=3600, stale-while-revalidate=86400'
    );
  }

  return response;
}

+--------------------------------+-----------------------------------+-----------------------------------+
| Feature Aspect                 | revalidatePath('/products/[slug]')| revalidateTag('product:123')      |
+--------------------------------+-----------------------------------+-----------------------------------+
| Invalidation Scope             | Entire page route URL path        | Specific tagged fetch calls       |
| Granularity Level              | Coarse (Purges full page tree)    | Fine (Purges single fetch entry)  |
| Cross-Route Invalidation       | Limited to matching path pattern  | Global across all route pages     |
| CMS Webhook Integration        | Requires mapping paths manually   | Direct mapping to entity IDs      |
+--------------------------------+-----------------------------------+-----------------------------------+

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: public, max-age=0, must-revalidate
x-nextjs-cache: HIT