Zenn
Open10

Next.js の ビルドの種類とレンダリングモード（SSR / ISR / SSG / Static Exports）

Next.js
React
Yasuhiro YamamotoYasuhiro Yamamoto

SSR

  • アクセスがあった際にページを生成する
  • 常に最新の情報を表示できるメリットがある
  • SSGに比べると都度生成するのでパフォーマンスは劣る
Yasuhiro YamamotoYasuhiro Yamamoto

ISR

  • SSGとSSRの中間
  • SSGの拡張版で、ビルド時に静的ファイルを生成するのは同じ
  • ただし、一定期間キャッシュした後、バックグラウンドで再生成が走る
  • 再生成中も古いページを表示できるので、アクセス中断がない
  • 定期的に最新のデータに更新されるため、リアルタイム性とパフォーマンスの両立に適している
Yasuhiro YamamotoYasuhiro Yamamoto

SSG

  • ビルド時に静的なファイルを生成
  • Static Exportsと異なる点
    • Static Exportsはoutディレクトリに出力されそれをNode以外の環境に配置できる
      • そのため機能に制約がある
    • SSGの場合はNext.js側でファイルを持っていてリクエストに応じて返却する
      • Next.jsがNodeランタイムでNodeの機能も使いながらハンドリングする
      • フルスタックフレームワークとしての機能やImageコンポーネントなども利用可能
Yasuhiro YamamotoYasuhiro Yamamoto

Static Exports

  • ビルド時に静的なファイルを生成
  • 冒頭で記載したとおりNext.jsが用意している機能の利用に制約がある
  • 単純な静的なファイルなのでホスティング先の選択肢が大幅に広がる
    • Node.jsやEdgeRuntimeなど環境に縛られないのでApacheなどにもデプロイできる
    • 社内で例えばAWS縛りがあるならS3 + CroudFront など
Yasuhiro YamamotoYasuhiro Yamamoto

更新のスピードが求められないような都度ビルド（ヘッドレスCMSからWebHookで通知とか）でも良いWEBサイトなら、ヘッドレスCMSとStatic Exportsというような組み合わせで十分な気がする。
コストを最小化できそう。

法人の場合はホスティング先の選択肢がいろいろな制約がありそうだけど、静的ファイルなら一気に選択肢は広がる。

Yasuhiro YamamotoYasuhiro Yamamoto

自分のポートフォリオサイト

  • Next.js / AppRouter（Route Handler）
  • Cloudflare Pages（Edge Runtime）
  • Newt（ヘッドレスCMS）
    • 活動履歴
    • 個人開発したアプリのFAQコンテンツ

この構成で0円で運用できている。
https://colers.jp