NextJsの基礎

NextJsを使うメリット

1.クライアントのPCに依存せずにレンダリングが可能

サーバー側であらかじめHTMLを構築しておくことが可能で、クライアント側は必要に応じてJavaScriptを読み込むだけで良くなっています。 SSGやSSRがキーワード、Static Site Generate / Server Side Rendering

2.直感的なルーティング設計ができる

Reactはrouterを用いていたが、NextJsではPageディレクトリに置けるPathがそのままURLになるので、設計が楽になっています。

3.ページ読み込み速度の上昇およびSEO対策

1と重複するが、サーバーサイド側であらかじめHTMLが構築されているので、読み込みの速度が早く、それに伴ってSEO対策にもつながっています。

プリレンダリングとは

HTMLのみあらかじめ読み込まれている状態のことです。

ボタン操作の処理に必要なJavaScriptはあとから読み込まれます。

SSGとSSRの違い

SSG(Static Site Generator)とは

ビルドしたときにHTMLの雛形が生成されている状態になっています。

クライアントがWebサイトに訪れてリクエストが投げられたらすでに生成済みのものを返すだけで良くなっています。

SSR(Server Side Rendering)とは

サーバー側でレンダリングしてくれます。 クライアント側がサイトに訪れようとリクエストを投げるとサーバーがHTMLだけのページを生成してリクエストを投げたクライアントに返します。 SSGとの違いはリクエストのタイミングでレンダリングをしている点となります。

SSG/SSRの使い分け

ページの更新頻度が低いものがSSG実装に適しており、例えばブログや商品ページ、ドキュメントなど静的なページに対しては最速で返信ができるSSGを使うことが多いです。

対して、プロフィールやSNSのタイムラインなど更新頻度が高いものはSSRが良いです。

もう一度書きますが、SSGはビルド時にHTMLを生成するので、後から書き換えが簡単ではありません。そのため更新頻度が高いものは適していない。という話につながります。

NextJsはSSGとSSRはページ単位で使い分けができます。 公式によると基本はSSGを用いてくださいとのことです。