Next.js App RouterでSSRが効かない原因と修正

// よくある誤解: "use client" を付けるとブラウザでのみ動く
"use client";

import { useState, useEffect } from "react";

export function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user").then(r => r.json()).then(setUser);
  }, []);

  if (!user) return <p>読み込み中...</p>;
  return <p>{user.name}</p>;
}

// Server Componentでのデータ取得（SSR/SSG）
// "use client" なし = Server Component
export default async function UserProfile() {
  // サーバーサイドで実行される
  const user = await getUser();

  return <p>{user.name}</p>;
}

npm run build

Route (app)                    Size     First Load JS
┌ ○ /                          4.2 kB        120 kB
├ ○ /[locale]/about            2.1 kB        118 kB
├ λ /[locale]/dashboard        5.3 kB        121 kB
└ ● /[locale]/blog/[slug]      8.4 kB        124 kB

// app/[locale]/dashboard/page.tsx

// これを追加するだけでSSRになる
export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  // リクエストごとに毎回実行される
  const data = await fetchDashboardData();

  return <Dashboard data={data} />;
}

// SSRのつもりだが、force-cacheでキャッシュされる
export default async function PricePage() {
  const prices = await fetch("https://api.example.com/prices", {
    cache: "force-cache", // ビルド時にキャッシュ → 更新されない
  }).then(r => r.json());

  return <PriceTable prices={prices} />;
}

// 毎回最新データを取得する
export default async function PricePage() {
  const prices = await fetch("https://api.example.com/prices", {
    cache: "no-store", // キャッシュなし → 毎回サーバーで取得
  }).then(r => r.json());

  return <PriceTable prices={prices} />;
}

// app/[locale]/profile/page.tsx
import { cookies } from "next/headers";

export default async function ProfilePage() {
  // cookies() を呼び出すだけで動的レンダリングになる
  const cookieStore = await cookies();
  const sessionToken = cookieStore.get("session")?.value;

  if (!sessionToken) {
    redirect("/login");
  }

  const user = await getUserFromSession(sessionToken);

  return <Profile user={user} />;
}

// app/[locale]/blog/page.tsx

interface SearchParams {
  page?: string;
  category?: string;
}

export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  // searchParamsを参照すると自動でSSRになる
  const { page = "1", category } = await searchParams;
  const posts = await getPosts({ page: Number(page), category });

  return <PostList posts={posts} />;
}

// app/[locale]/blog/[slug]/page.tsx
import { unstable_cache } from "next/cache";

// タグ付きキャッシュ
const getPost = unstable_cache(
  async (slug: string) => {
    return fetchPostFromCMS(slug);
  },
  ["post"],
  {
    tags: ["posts"],
    revalidate: 3600, // 1時間でも自動再検証
  }
);

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  return <article>{post.content}</article>;
}

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

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

  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }

  // "posts" タグが付いた全キャッシュを無効化
  revalidateTag("posts");

  return Response.json({ revalidated: true });
}

// app/[locale]/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// デフォルト: true（リストにないスラグはSSRで対応）
export const dynamicParams = true;

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) notFound();

  return <article>{post.content}</article>;
}