Zenn
🗂

Next.js App Routerって結局どう使えばいい？レンダリングの種類を整理してみた【備忘録】

に公開
Next.js
React
frontend
レンダリング
App Router
idea

はじめに

Next.jsのApp Router周り、なんとなく使ってたけど、
CSR / SSR / SSG / ISR とか混ざってくると頭こんがらがる…！

自分なりに整理したので備忘録として残します。

App Routerって何？

Next.js 13以降で導入された、
pagesディレクトリの代わりに使える新しいルーティングの仕組み。

  • app/ ディレクトリを使う
  • ファイルベースでページ定義
  • layout.tsx や loading.tsx などが使える
  • React Server Component（RSC）が前提に

レンダリングの種類まとめ

種類 内容 特徴
SSR（Server Side Rendering） リクエストのたびにHTMLをサーバーで生成 最新データ取得可 / SEO対応可 / ⚠ サーバー負荷あり
SSG（Static Site Generation） ビルド時にHTMLを生成し、CDNなどから配信 爆速 / SEO最強 / ⚠ ビルド固定データ
ISR（Incremental Static Regeneration） SSG + 一定間隔で自動再生成 高速 / 準リアルタイム更新可能
CSR（Client Side Rendering） ブラウザ上でJSがデータを取得し描画 柔軟 / ⚠ 初回白ページ / ⚠ SEO弱い

よく使うパターン

generateStaticParams() の基本

App Router で動的ルート（例：/blog/[slug]）を静的に生成（SSG）するための関数。

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

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({ slug: post.slug }))
}

この関数があると、Next.js はビルド時に対象のページを静的に生成（SSG）。

ページコンポーネント（Server Component）

export default async function Page({
  params,
}: {
  params: { slug: string }
}) {
  const { slug } = params
  const data = await fetchPost(slug)
  return <PostDetail {...data} />
}
  • async 関数のため Server Component
  • 上記で静的なHTMLがビルド時に生成される

再生成したい場合（ISR）

export const revalidate = 60 // 60秒ごとに再生成

これにより、一定時間ごとにバックグラウンドで静的ページを再生成（ISR）。

よくある誤解

誤解 実際
Server Component = SSR ❌ SSRではなく、SSGとしても使える
generateStaticParams は SSR用 ❌ SSG用。動的ルートを静的化するための関数
revalidate はSSRに近い ⭕ ISR（静的再生成）

クライアントでCSRしたいとき

'use client'
import { useEffect, useState } from 'react'

export default function ClientComponent() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData)
  }, [])

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>
}

結論：用途に合わせて選ぶ

SEOや初速重視 → SSG/ISR
常に最新データ → SSR
ユーザー操作後に取得 → CSR

おわりに

実際に使ってて感じたのは、
app/ ディレクトリにしても最初は慣れが必要
レンダリングの種類は「どうデータを取得するか」で覚えると良さそう
少しずつ体で覚えるしかない…！

Discussion