第5章: データフェッチとキャッシュ戦略 — use cacheからISRまで

// app/posts/page.tsx — Server Componentでの直接fetch
export default async function PostsPage() {
  // サーバー側で直接データを取得（クライアントにバンドルされない）
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.map((post: { id: string; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// React.cache()を使った手動メモ化（fetch以外のデータソース向け）
import { cache } from 'react';
import { db } from '@/lib/db';

// 同一リクエスト内で複数回呼ばれても、DBクエリは1回だけ実行される
export const getUser = cache(async (id: string) => {
  return await db.user.findUnique({ where: { id } });
});

// 1. ファイルレベル — ファイル内のすべてのエクスポートをキャッシュ
'use cache';

export async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

export async function getCategories() {
  const res = await fetch('https://api.example.com/categories');
  return res.json();
}

// 2. コンポーネントレベル — 特定のコンポーネントの出力をキャッシュ
export async function ProductCard({ id }: { id: string }) {
  'use cache';
  const product = await fetch('https://api.example.com/products/' + id);
  const data = await product.json();

  return (
    <div>
      <h3>{data.name}</h3>
      <p>{data.price}円</p>
    </div>
  );
}

// 3. 関数レベル — 特定のデータフェッチ関数をキャッシュ
export async function getProductById(id: string) {
  'use cache';
  const res = await fetch('https://api.example.com/products/' + id);
  return res.json();
}

import { cacheLife } from 'next/cache';

export async function getPopularProducts() {
  'use cache';
  cacheLife('hours'); // 1時間ごとに再検証、最大1日保持

  const res = await fetch('https://api.example.com/popular');
  return res.json();
}

// カスタムプロファイルも定義可能（next.config.ts）
// next.config.ts
const nextConfig = {
  experimental: {
    cacheLife: {
      'blog-posts': {
        stale: 600,      // 10分間はstaleデータを返す
        revalidate: 3600, // 1時間ごとにバックグラウンド再検証
        expire: 86400,    // 24時間で完全に期限切れ
      },
    },
  },
};
export default nextConfig;

import { cacheTag, cacheLife } from 'next/cache';
import { revalidateTag } from 'next/cache';

// データフェッチ側: タグを付与
export async function getPost(slug: string) {
  'use cache';
  cacheTag('posts', 'post-' + slug);
  cacheLife('days');

  const res = await fetch('https://cms.example.com/posts/' + slug);
  return res.json();
}

// Server Action側: タグで無効化
export async function publishPost(slug: string) {
  'use server';
  // DBに保存した後、該当記事のキャッシュを無効化
  await db.post.update({ where: { slug }, data: { published: true } });

  revalidateTag('post-' + slug); // 特定記事のキャッシュを無効化
  revalidateTag('posts');          // 記事一覧のキャッシュも無効化
}

// リモートキャッシュ: 全サーバーインスタンスで共有
export async function getGlobalConfig() {
  'use cache: remote';
  cacheLife('days');

  const res = await fetch('https://api.example.com/config');
  return res.json();
}

import { cookies } from 'next/headers';

// プライベートキャッシュ: ユーザーごとにキャッシュが分離
export async function getUserDashboard() {
  'use cache: private';
  cacheLife('minutes');

  const cookieStore = await cookies();
  const sessionId = cookieStore.get('session')?.value;

  const res = await fetch(
    'https://api.example.com/dashboard?session=' + sessionId
  );
  return res.json();
}

// app/blog/[slug]/page.tsx — ISRの設定
export const revalidate = 3600; // 1時間ごとに再検証

export async function generateStaticParams() {
  const posts = await fetch('https://cms.example.com/posts')
    .then(r => r.json());
  return posts.map((post: { slug: string }) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await fetch(
    'https://cms.example.com/posts/' + slug
  ).then(r => r.json());

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

// Before: unstable_cache（非推奨へ移行予定）
import { unstable_cache } from 'next/cache';

const getCachedPosts = unstable_cache(
  async () => {
    return await db.post.findMany();
  },
  ['posts'],            // 手動キー指定
  { revalidate: 3600, tags: ['posts'] }
);

// After: 'use cache'（推奨）
import { cacheLife, cacheTag } from 'next/cache';

async function getCachedPosts() {
  'use cache';
  cacheLife('hours');
  cacheTag('posts');

  return await db.post.findMany();
}