Next.js: キャッシュコンポーネント & use cache

// app/dashboard/page.tsx
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

async function getUserData() {
  'use cache'
  cacheTag('user-data')
  cacheLife({ stale: 300, revalidate: 600 })

  const user = await db.user.findUnique({ where: { id: 1 } })  // 1回だけ実行
  return user
}

export default async function DashboardPage() {
  const user = await getUserData()  // 最初の呼び出しでデータベースクエリを実行
  // 後続の呼び出しはキャッシュされた結果を直接返します

  return (
    <div>
      <UserAvatar user={user} />
      <UserGreeting user={user} />
      <UserStats user={user} />
      <UserNotifications user={user} />
    </div>
  )
}

// app/cache-demo/actions.ts
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

export async function getExpensiveData(id: string) {
  'use cache'
  cacheTag('expensive', `id-${id}`)         // タグ付け
  cacheLife({ stale: 60, revalidate: 300 }) // 60秒以内は stale を返す、300秒で再検証

  // この関数内のすべての操作がキャッシュされます
  const result = await db.query(...)
  return result
}

getExpensiveData コンポーネントの UI をレンダリングします。

// app/cache-basic/page.tsx
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

async function getServerTime() {
  'use cache'
  cacheTag('server-time')
  cacheLife({ stale: 10, revalidate: 30 })

  // 時間のかかる操作をシミュレート
  await new Promise(resolve => setTimeout(resolve, 1000))
  return { time: new Date().toISOString(), server: process.env.HOSTNAME ?? 'local' }
}

export default async function CacheBasicPage() {
  const [t1, t2, t3] = await Promise.all([
    getServerTime(),
    getServerTime(),
    getServerTime(),
  ])

  return (
    <div>
      <h1>use cache — 基本</h1>
      <p>呼び出し1: {t1.time}</p>
      <p>呼び出し2: {t2.time}</p>
      <p>呼び出し3: {t3.time}</p>
      <p><em>3つの呼び出しすべてが同じキャッシュ結果を返しました (重複計算なし)</em></p>
    </div>
  )
}

呼び出し1: 2026-07-06T10:00:00.000Z
呼び出し2: 2026-07-06T10:00:00.000Z ← 同じタイムスタンプ (キャッシュヒット)
呼び出し3: 2026-07-06T10:00:00.000Z ← 同じタイムスタンプ (キャッシュヒット)

呼び出し1: 2026-07-06T10:00:00.000Z
呼び出し2: 2026-07-06T10:00:00.000Z  ← キャッシュのミリ秒が重複
呼び出し3: 2026-07-06T10:00:00.000Z

// app/products/[id]/page.tsx
import { unstable_cacheTag as cacheTag } from 'next/cache'

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

async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`)  // パラメータに基づく動的タグ
  return fetch(`https://api.example.com/products/${id}`).then(r => r.json())
}

データを取得し、結果をレンダリングします。

// app/cache-strategy/page.tsx
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

async function getUserProfile(userId: number) {
  'use cache'
  cacheTag('users', `user-${userId}`)
  cacheLife({ stale: 120, revalidate: 600 })  // 2分 stale、10分 revalidate
  return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`).then(r => r.json())
}

async function getUserPosts(userId: number) {
  'use cache'
  cacheTag('posts', `user-posts-${userId}`)
  cacheLife({ stale: 60, revalidate: 300 })
  return fetch(`https://jsonplaceholder.typicode.com/users/${userId}/posts`).then(r => r.json())
}

export default async function CacheStrategyPage() {
  const [profile, posts] = await Promise.all([
    getUserProfile(1),
    getUserPosts(1),
  ])

  return (
    <div>
      <h1>{profile.name}</h1>
      <p>Email: {profile.email}</p>
      <h2>Posts ({posts.length})</h2>
      <ul>{posts.map((p: any) => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  )
}

データをサーバーサイドで取得し、データからアイテムのリストをレンダリングします。

コンポーネントがブラウザで説明された UI をレンダリングします。

// app/cache-invalidation/page.tsx
import { unstable_cacheTag as cacheTag, revalidateTag } from 'next/cache'

async function getTaskList() {
  'use cache'
  cacheTag('tasks')
  return fetch('https://jsonplaceholder.typicode.com/todos?_limit=5').then(r => r.json())
}

export default async function CacheInvalidationPage() {
  const tasks = await getTaskList()
  return (
    <div>
      <h1>タスク一覧</h1>
      <ul>{tasks.map((t: any) => <li key={t.id}>{t.title}</li>)}</ul>
      <form action={async () => {
        'use server'
        revalidateTag('tasks')  // ボタンクリックでタスク一覧のキャッシュを即時更新
      }}>
        <button type="submit">タスクを更新</button>
      </form>
    </div>
  )
}

入力フィールドと送信ボタンを持つフォーム。
送信時、サーバーアクションがデータを処理し、関連するキャッシュタグを無効化します。
表示テキスト: Task List

上記の説明通りにページをレンダリングし、説明の動作に基づいて UI が更新されます。

// app/cache-combo/page.tsx
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

// 1. fetch キャッシュ: 外部 API を呼び出し
async function getExternalPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { tags: ['external-posts'], revalidate: 300 }
  }).then(r => r.json())
}

// 2. use cache: 処理済みデータ
async function getProcessedPosts() {
  'use cache'
  cacheTag('processed-posts')
  cacheLife({ stale: 60, revalidate: 600 })

  const raw = await getExternalPosts()  // fetch キャッシュに依存
  return (raw as any[]).map((p: any) => ({
    id: p.id,
    title: p.title.toUpperCase(),
    summary: p.body.slice(0, 100),
  }))
}

export default async function CacheComboPage() {
  const posts = await getProcessedPosts()

  return (
    <div>
      <h1>Processed Posts ({posts.length})</h1>
      <ul>{posts.map((p: any) => (
        <li key={p.id}><strong>{p.title}</strong><p>{p.summary}</p></li>
      ))}</ul>
    </div>
  )
}

データをサーバーサイドで取得し、データからアイテムのリストをレンダリングします。

// app/cache-system/page.tsx — 完全なキャッシュアーキテクチャ
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

// ======== データレイヤー (use cache 明示的キャッシュ) ========
type User = { id: number; name: string; email: string }
type Post = { id: number; title: string; body: string }

async function getUsers(): Promise<User[]> {
  'use cache'
  cacheTag('users')
  cacheLife({ stale: 120, revalidate: 600 })
  return fetch('https://jsonplaceholder.typicode.com/users').then(r => r.json())
}

async function getUserPosts(userId: number): Promise<Post[]> {
  'use cache'
  cacheTag('posts', `user-posts-${userId}`)
  cacheLife({ stale: 60, revalidate: 300 })
  return fetch(`https://jsonplaceholder.typicode.com/users/${userId}/posts`).then(r => r.json())
}

async function getStats(users: User[]) {
  'use cache'
  cacheTag('stats')
  cacheLife({ stale: 300, revalidate: 1800 })
  return {
    totalUsers: users.length,
    avgNameLength: users.reduce((s, u) => s + u.name.length, 0) / users.length,
  }
}

// ======== ページコンポーネント ========
export default async function CacheSystemPage() {
  const users = await getUsers()
  const stats = await getStats(users)

  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: 24 }}>
      <h1>ユーザー管理</h1>
      <StatsCard stats={stats} />
      <div style={{ display: 'grid', gap: 16, marginTop: 24 }}>
        {users.map(user => (
          <UserCard key={user.id} user={user} />
        ))}
      </div>
    </div>
  )
}

// ======== 子コンポーネント (独立キャッシュ) ========
async function UserCard({ user }: { user: User }) {
  const posts = await getUserPosts(user.id)
  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>{user.name}</h2>
      <p style={{ color: '#666' }}>{user.email}</p>
      <details>
        <summary>Posts ({posts.length})</summary>
        <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
      </details>
    </div>
  )
}

function StatsCard({ stats }: { stats: { totalUsers: number; avgNameLength: number } }) {
  return (
    <div style={{ background: '#f0f4ff', borderRadius: 8, padding: 16, display: 'flex', gap: 32 }}>
      <div><strong>合計ユーザー数</strong><p style={{ fontSize: 24 }}>{stats.totalUsers}</p></div>
      <div><strong>平均名前長</strong><p style={{ fontSize: 24 }}>{stats.avgNameLength.toFixed(1)}</p></div>
    </div>
  )
}

// ======== 管理タスク ========
// app/cache-system/actions.ts
'use server'
import { revalidateTag } from 'next/cache'

export async function refreshUserData() {
  revalidateTag('users')        // ユーザー一覧を更新
}

export async function refreshPosts(userId: number) {
  revalidateTag(`user-posts-${userId}`)  // 特定ユーザーの投稿を更新
}

export async function refreshAll() {
  revalidateTag('users')
  revalidateTag('posts')
  revalidateTag('stats')
}

// app/cache-system/admin-button.tsx
'use client'
export function AdminControls() {
  return (
    <div style={{ display: 'flex', gap: 8, margin: '16px 0' }}>
      <form action={async () => {
        const { refreshUserData } = await import('./actions')
        await refreshUserData()
      }}>
        <button type="submit">ユーザーを更新</button>
      </form>
      <form action={async () => {
        const { refreshAll } = await import('./actions')
        await refreshAll()
      }}>
        <button type="submit">すべて更新</button>
      </form>
    </div>
  )
}

入力フィールドと送信ボタンを持つフォーム。
送信時、サーバーアクションがデータを処理し、関連するキャッシュタグを無効化します。
表示テキスト: User Management

// app/cache-verify/page.tsx — キャッシュヒットを確認
import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from 'next/cache'

let callCount = 0

async function getUniqueId() {
  'use cache'
  cacheTag('unique-id')
  cacheLife({ revalidate: 30 })
  callCount++
  return { id: crypto.randomUUID(), calls: callCount }
}

export default async function CacheVerifyPage() {
  const [a, b, c] = await Promise.all([
    getUniqueId(),
    getUniqueId(),
    getUniqueId(),
  ])

  return (
    <div>
      <h1>キャッシュ検証</h1>
      <p>結果 A: {a.id} (呼び出し #{a.calls})</p>
      <p>結果 B: {b.id} (呼び出し #{b.calls})</p>
      <p>結果 C: {c.id} (呼び出し #{c.calls})</p>
      <p><strong>同じ ID + calls = 1 → キャッシュヒット</strong></p>
    </div>
  )
}

内容: Cache Verification | Same ID + calls = 1 → キャッシュヒット

結果 A: 550e8400-e29b-41d4-a716-446655440000 (呼び出し #1)
結果 B: 550e8400-e29b-41d4-a716-446655440000 (呼び出し #1)  ← キャッシュヒット
結果 C: 550e8400-e29b-41d4-a716-446655440000 (呼び出し #1)  ← キャッシュヒット