前提 Next.js は「できるだけ Static にしよう」とする
Next.js の思想はこれ👇
「静的にできるものは、全部静的にして最速で配信しよう」
Static Rendering(静的) と Dynamic Rendering(動的) とは？
一言で言うと
→ 「ページを“いつ”作るか」の違い
Static Rendering（静的レンダリング）
いつ作る？
ビルド時（npm run build のとき）
どういう仕組み？
ビルド時に HTML を先に作っておき、アクセス時は 完成済みHTMLを配信するだけ
特徴
- 爆速
- サーバー負荷が低い
- ロジックはほぼ動かない
例
- ブログ記事
- LP
- ドキュメント
- 変わらないページ
Next.jsでの例
export default function Page() {
return <h1>Hello</h1>;
}
（デフォルトは Static になろうとする）
Dynamic Rendering（動的レンダリング）
いつ作る？
リクエストごと（アクセスされるたび）
どういう仕組み？
アクセスが来るたびに、DBを読む 認証を見る APIを叩く
→ その結果でHTMLを生成
アクセス ─▶ サーバー実行 ─▶ HTML生成 ─▶ 返す
特徴
- 毎回ロジックが動く
- ユーザーごとに内容を変えられる
- 静的より遅い
例
- マイページ
- 管理画面
- チャット
- 認証必須ページ
Next.jsでの例
import { cookies } from "next/headers";
export default function Page() {
const user = cookies().get("user");
return <div>{user?.value}</div>;
}
→ Dynamic に確定
Next.js（App Router）での違い
Next.js は「できるだけ Static にしよう」とする
デフォルトでは Static Rendering ですが、、、、
次のどれかがあると Dynamic に昇格します
Dynamic になる条件
cookies()headers()- 認証情報
fetch({ cache: "no-store" })- Firestore / DB アクセス
export const dynamic = "force-dynamic"
Static でやってはいけない例
ビルド時に
- Firestoreを読む
- APIキーを使う
- 外部APIを叩く
「ビルドが失敗」「本番で壊れる」
これを防ぐための force-dynamic。
一文でまとめると
Static = 先に作る / Dynamic = その場で作る