Engineer
|Imai
Next.jsとは?
公開日:2023/11/3
Next.jsはWebアプリケーションにおけるフロントエンド(画面側)部分とバックエンド(サーバー側)を構築するためのReactベースのJavaScriptフレームワークです。
Next.jsはルーティングや開発環境などが簡単に構築、設定できることに加え、後述のSSR(Server Side Rendering)やSSG(Static Site Generation)、ISR(Incremental Static Regeneration)といったサーバー側のレンダリング機能がデフォルトで備えられてるところが特長です。
また、ベースとなっているReactとは違い、サーバー機能やURLルーティングの自動生成機能を持っている、Next.js単体でWebアプリを動作させることや、初期化時に生成されたフォルダにファイルを配置するだけで簡単にURLを生成することができます。
ページごとに選べるレンダリング方式(CSR、SSR、SSG、ISR)
Next.jsではCSR、SSR、SSG、ISRの4種類のレンダリング方式を各ページごとに選べます。
これにより、各ページのコンテンツに合わせた最適なレンダリングの選択が可能になっています。
CSR(Client Side Rendering)
サーバー側ではなくクライアント側でデータのフェッチやページの生成を行います。素のReactアプリケーションのようなSPA(Single Page Application)はこの方式でレンダリングを行います。最初のローディングの際にHTMLやJavaScriptなど全てのデータを取得する必要があるため、初期のローディングに時間がかかります。
SSR(Server Side Rendering)
データのフェッチやページの生成をサーバー側で行います。クライアント側は表示するだけになるので、クライアント環境のスペックに依存せずコンテンツの配信が出来ますが、リクエストごとに毎回ページを生成するためサーバー側の負荷は高くなります。コンテンツの更新頻度が高いサービスに向いています。
SSG(Static Site Generation)
SSRとは異なり事前にビルドして全てのページをサーバー側で生成します。毎回ページ生成を行わない分、SSRよりもパフォーマンスが優れていますが、ビルドしないとデータは更新されないので、コンテンツの更新頻度が高いサービスには向いていません。
ISR(Incremental Static Regeneration)
SSGの発展型で、あらかじめ設定した期間ごとにサーバー側で自動で再ビルドします。常に最新のデータを表示する必要があるわけではないが、ある程度更新頻度が高いようなデータを扱う場合に適しています。