Next.js SSR完全ガイド：Server Componentsで変わったこと

// Pages Router（旧）
// pages/posts/[id].tsx
export async function getServerSideProps(context) {
  const { id } = context.params;
  const post = await fetchPost(id);

  return {
    props: { post },
  };
}

export default function PostPage({ post }) {
  return <article>{post.title}</article>;
}

// App Router（現在）
// app/posts/[id]/page.tsx
async function fetchPost(id: string) {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  return res.json();
}

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

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

// app/components/ArticleList.tsx
// "use client" がない = Server Component

import { getArticles } from "@/lib/content";

export async function ArticleList({ category }: { category: string }) {
  // ここはサーバーでしか実行されない
  // APIキーをそのまま書いても安全
  const articles = await getArticles(category);

  return (
    <ul>
      {articles.map((article) => (
        <li key={article.slug}>
          <a href={`/ja/${category}/${article.slug}`}>{article.title}</a>
        </li>
      ))}
    </ul>
  );
}

// app/components/LikeButton.tsx
"use client";

import { useState } from "react";

// インタラクションが必要な最小単位だけClient Componentにする
export function LikeButton({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  const [liked, setLiked] = useState(false);

  const handleLike = async () => {
    if (liked) return;
    setCount((c) => c + 1);
    setLiked(true);
    await fetch("/api/likes", { method: "POST" });
  };

  return (
    <button onClick={handleLike} aria-pressed={liked}>
      {liked ? "❤️" : "🤍"} {count}
    </button>
  );
}

// app/posts/[id]/page.tsx (Server Component)
import { LikeButton } from "@/components/LikeButton";

export default async function PostPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const post = await fetchPost(id);
  const likeCount = await getLikeCount(id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* Client ComponentをServer Componentの中に埋め込む */}
      <LikeButton initialCount={likeCount} />
    </article>
  );
}

// Next.js 15+ では fetch はデフォルトで no-store
const res = await fetch("https://api.example.com/posts");

// 明示的にSSGしたい場合（ビルド時に一度だけ取得）
const res = await fetch("https://api.example.com/posts", {
  cache: "force-cache",
});

// 一定時間ごとに再生成（ISR相当）
const res = await fetch("https://api.example.com/posts", {
  next: { revalidate: 3600 }, // 1時間ごとに再検証
});

// 常に最新（SSR相当）
const res = await fetch("https://api.example.com/posts", {
  cache: "no-store",
});

import { cacheLife, cacheTag } from "next/cache";

async function getRecentPosts(category: string) {
  "use cache";
  cacheLife("hours"); // 1時間キャッシュ
  cacheTag("posts");

  // fetchを使わないDB直接クエリ
  return await db.post.findMany({
    where: { category },
    orderBy: { createdAt: "desc" },
    take: 10,
  });
}

// app/posts/[id]/page.tsx — 静的生成（SSG相当）にする場合
export const dynamic = "force-static";

// app/posts/[id]/page.tsx — 動的レンダリング（SSR相当）にする場合
export const dynamic = "force-dynamic";

// ISR相当：60秒ごとに再生成
export const revalidate = 60;

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

// ビルド時に全記事のパラメータを生成
export async function generateStaticParams() {
  const locales = ["ja", "en", "es"];
  const categories = [
    "nextjs", "react", "vercel", "security",
    "claude-code", "ffmpeg", "cli", "gaming",
    "yocto", "renpy", "business",
  ];

  const paths = [];
  for (const locale of locales) {
    for (const category of categories) {
      const articles = await getArticlesByCategory(category, locale);
      for (const article of articles) {
        paths.push({
          locale,
          category,
          slug: article.slug,
        });
      }
    }
  }
  return paths;
}

// app/posts/[id]/page.tsx
import { Suspense } from "react";
import { PostContent } from "@/components/PostContent";
import { RelatedPosts } from "@/components/RelatedPosts";
import { CommentSection } from "@/components/CommentSection";

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

  return (
    <main>
      {/* 記事本文は先に表示（APIが速い） */}
      <Suspense fallback={<PostContentSkeleton />}>
        <PostContent id={id} />
      </Suspense>

      {/* 関連記事は後から表示（別のAPIで少し遅い） */}
      <Suspense fallback={<RelatedPostsSkeleton />}>
        <RelatedPosts id={id} />
      </Suspense>

      {/* コメントは最後（最も重い処理） */}
      <Suspense fallback={<CommentsSkeleton />}>
        <CommentSection id={id} />
      </Suspense>
    </main>
  );
}

// app/[locale]/page.tsx
// トップページ - 静的生成

export async function generateStaticParams() {
  return [{ locale: "ja" }, { locale: "en" }, { locale: "es" }];
}

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  // ビルド時にMDXファイルを読んで記事一覧を取得
  const latestPosts = await getLatestPosts(locale, 6);
  const categories = await getCategories(locale);

  return (
    <main>
      <HeroSection />
      <ArticleGrid posts={latestPosts} />
      <CategoryList categories={categories} />
    </main>
  );
}

// app/contact/page.tsx
export default function ContactPage() {
  async function submitContact(formData: FormData) {
    "use server"; // この関数はサーバーで実行される

    const name = formData.get("name") as string;
    const email = formData.get("email") as string;
    const message = formData.get("message") as string;

    // サーバー処理（メール送信、DB保存など）
    await sendEmail({ name, email, message });

    // バリデーションやエラー処理はここに書く
  }

  return (
    <form action={submitContact}>
      <input name="name" type="text" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">送信</button>
    </form>
  );
}