Next.js App Router: データ取得とキャッシュ戦略のハッカソンメモ

はじめに

こないだ参加したハッカソンで得た知見の備忘録です。

1. データ取得の基本パターン

データ取得の方法は、主に ServerActions でfetchするか、API ルートを作成してfetchするかの 2 択。

API ルートを選択する場合、fetch でユーザーの操作を伴う場合はクライアントコンポーネント化しないといけない。
ServerActions だとそのハードルを超えれる ⇨ 現在の主流らしい

---

2. キャッシュ戦略

2.1 毎回最新データを取得 (SSR)

fetchはデフォルトでキャッシュされる。キャッシュを無効化し、リクエストごとに最新のデータを取得する SSR（サーバーサイドレンダリング）を実現するには、fetchのオプションにcache: "no-store"を指定する。

fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}${endpoint}`, {
  cache: "no-store",
});

2.2 サーバーサイドでのキャッシュ更新 (revalidatePath)

POSTやPUTなどの API ルートでデータ更新が行われた後、関連するページのサーバーキャッシュを無効化する際に使用する。

revalidatePathはサーバー上のキャッシュを削除するだけで、ブラウザのリロードはトリガーしない。

// API Route内
import { revalidatePath } from "next/cache";

// ...データ更新処理後...
revalidatePath("/profile", "layout"); // /profileで始まるページのキャッシュを無効化

2.3 クライアントサイドからのキャッシュ更新 (router.refresh)

クライアント側から、サーバーコンポーネントのデータを再取得・再レンダリングさせたい場合に使用する。

router.refresh()はサーバーコンポーネントのみを更新し、クライアントコンポーネントの状態（useStateなど）は維持される。

// Client Component内
"use client";
import { useRouter } from "next/navigation";

const router = useRouter();

// ...何らかの処理後...
router.refresh(); // サーバーデータを再取得してUIを更新

---

おまけ: ルートハンドラーでのparams取得

API ルート（ルートハンドラー）で、/users/[id]のような動的なパスパラメータを取得する場合の記述法(Next.js13 以降)

// app/api/users/[id]/route.ts

import { NextRequest, NextResponse } from "next/server";

export async function GET(
  props: { params: Promise<{ id: string }> }) { //ここと、
  try {
    const { id: profileUserId } = await props.params; //ここが必要
...