Zenn
🔲

Next.jsの簡単な概要と配信方法の違いについて説明

2024/12/20に公開
Next.js
tech

Next.jsの概要

  • Reactベースのフレームワーク
  • Nust.jsとは違う（Nust.jsはVue.jsベースのフレームワーク）
  • サーバサイドのコードも書けるのでフロントエンドを超えたものになっている
  • React本体に無いrouter機能などがビルトインされている
  • ページやJSファイルのチャンク化や最適化もビルド時に行ってくれる
  • Next.jsのRouter機能はAppRouterが出てきて、PageRouterは過去のものとなった
  • Client Components（ファイル先頭に"use client"と書く）とServer Componentsの概念があり、デフォルトServer Componentsとして扱われる
  • 選べる配信方法
    • CSR（Client Side Rendering）（クライアントサイドレンダリング）
    • SSR（Server Side Rendering）（サーバーサイドレンダリング）
    • SSG（Static Site Generation）（静的サイト生成）
    • ISR（Incremental Static Regeneration）（増分静的再生成）
  • ハイドレーションと呼ばれる機能がある
    • サーバでHTMLを生成してHTMLの動的部分に流し込むイメージ
    • BFF(backend for frontend)かバックエンドサーバ（HTMLの配信やレンダリングするサーバ）が必要になる
    • アイランドアーキテクチャの発想っぽい

ファイルの種類

  • 【CSR系】ファイルの先頭に「"use client"」が付いているファイル
    • ブラウザの機能を使う場合、必要となる
  • 【SSG系】getStaticProps や getStaticPaths を使っているファイル
  • 【SSR系】getServerSidePropsを使っているファイル
  • 【その他】上記以外のファイル

もし、CSRでフロントを構築したい場合、SSR系のファイルは置かないようにしないといけない。

逆に、SSRでBFFやバックエンドサーバを置く場合、CSR系のファイルがあっても問題ない。

ややこしいが、それぞれの役割や配置を考えると何が使えて、何が使えないのか？は理解できると思う。

CSR（Client Side Rendering）（クライアントサイドレンダリング）

  • SPA（Single Page Application）スタイル
  • SEOで不利（初回取得時に完全なHTMLにならないため）
  • HTML配信のためのサーバが不要（データの取得先であるAPIサーバは必要）
  • 余談だが"use client"と記述がないコードはビルド時にレンダリングされる
  • getServerSideProps や getStaticProps を使わなければ静的ファイルをexportしてCSRのサイトとして作成できる

制約

  • 特にCSRに限った話ではないが、ブラウザ機能を使うファイルは先頭に「"use client"」というキーワードを付ける必要がある
  • ハイドレーションは使えない（ハイドレーションを実行するHTML配信サーバが無い）
  • JavaScriptで画面を作るので非力なPCやスマホだと表示が遅くなる

SSR（Server Side Rendering）（サーバーサイドレンダリング）

  • サーバサイドでレンダリングしたHTMLを返す
  • テンプレートエンジンを使用した昔ながらのスタイルっぽい
  • SEOで有利
  • CSRと違ってAPIサーバが不要になる（代わりにBFFかバックエンドサーバが必要になる）
  • サーバでHTMLを生成するのでPCやスマホの表示はCSRより負荷が低く高速に表示できる
  • ハイドレーションを使えば、"use client"のコンポーネントも使える
  • キャッシュ機能が使えてキャッシュヒットすれば高速に返却できる（キャッシュ管理も必要になる）

制約

  • BFFかバックエンドサーバが必要になる
  • サーバサイドでレンダリングするのでサーバ側の負荷が増す

SSG（Static Site Generation）（静的サイト生成）（ハイドレーション無し）

  • 全部HTMLにして配信するスタイル
  • ドキュメントやニュース記事などページに頻繁に変更が無いサイトに適する
  • BFFやバックエンドサーバが不要
  • キャッシュ機能が使えてキャッシュヒットすれば高速に返却できる（キャッシュ管理も必要になる）

制約

  • ハイドレーション無しだと"use client"の記述のあるファイルが使えない
  • domを操作するなどする場合、別途JSファイルを記述する必要がある

SSG（Static Site Generation）（静的サイト生成）（ハイドレーション有り）

  • 全部HTMLにして配信するスタイル
  • 動的な要素があるサイトにも使える
  • "use client"のコンポーネントも使える
  • キャッシュ機能が使えてキャッシュヒットすれば高速に返却できる（キャッシュ管理も必要になる）

制約

  • ハイドレーションを使うならBFFかバックエンドサーバが必須になる

ISR（Incremental Static Regeneration）（増分静的再生成）

SSGとSSRを組み合わせたもの。

  • 指定した時間が経過している場合には、バックグラウンドで新しいページが生成される
  • フルビルドを必要としないので、ビルド時間の短縮ができる

制約

  • BFFかバックエンドサーバが必須になる

Next.jsでビルドしてスタートするとSSGとSSRとCSRのどれで動く？

next build && next start

組み合わせて動作する。

  • getStaticPropsやgetStaticPathsを使用しているページはhtmlが生成される（SSG）
  • getServerSidePropsを使用しているページは、リクエストがあるたびにサーバーでHTMLが生成される（SSR）
  • "use client"を指定したコンポーネントは、クライアントサイドでのみレンダリングされる（CSR）
  • ハイドレーション機能も使われている
    • 無効化する設定もあるが2024/12/20現在は実験的設定になっていて本番では非推奨

CSRでexportする方法

nextのコンフィグにパラメータを追加してビルドするだけ

const nextConfig = {
  output: 'export',
  // 下記はoutputを指定している状態で、devモードでも立ち上げる場合に、
  // エラーが出るため必要になる（画像周りの最適化がオフになるのでlocalのみとしたい）
  images: { unoptimized: true } 
};
export default nextConfig;

next build

outというフォルダにファイルが出来上がるので、お手軽に確認するなら下記でやると良い。

npm install -g http-server
cd /path/to/your/directory/out
http-server

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

使い方を軽く思いついた範囲で

  • CSRで作成して静的ファイルを配信サーバに置く。APIサーバをRust言語で書いて高速かつ低コストなWebシステムを作る
  • フロントとバックエンド同じ言語で行くなら、SSR or SSG にしてBFFも置かないというのもあり
  • マイクロサービスなどでシステムを作っている場合、BFFを置いてシステムの違いを吸収するのもあり

最後に

フロントエンドめっちゃ複雑になったなという印象。

ただ、ビルドして生成されたページは高速に表示されるので物はよくなっていると思う。

devモードでの初回表示時が遅いが下記記事の方法で回避できる。
https://zenn.dev/daijinload/articles/dcac6b14159189

どういう使い方をするか？は、状況に応じて使い分けたいところ。

Discussion