【Next.js】「CSR」、「SSR」、「SSG」の違い

使い分け

	SEO	リアルタイム更新	サイト再生成	初期ロード	ページ遷移	サーバー負荷	用途
CSR	×	○	×	遅い	早い
SSR	○	○	○	遅い	遅い	高い	動的データが頻繁に更新される場合
SSG	×	×	×	早い	早い		DocumentやHelp
SSG + Prefetch	○	×	×	早い	早い		商品一覧
SSG + Prefetch + ISR	○	×	○	早い	早い
SSG + Client side fetching	×	○	×	早い	早い		ダッシュボード
SSG + Prefetch + Client side fetching(useSWR)	○	○	×	早い	早い		ニュースサイト
SSG + Prefetch + Client side fetching(useSWR) + ISR	○	○	○	早い	早い

Pre-render(HTML事前生成)の種類

基本的に、Next.jsは全ページdefaultでHTMLを事前レンダリングしてくれます。

正確に言えば、同じ事前レンダリングでも以下のような種類があるので覚えておきましょう。

1.SSG

SEOは意識しない。DocumentやHelpなどのように「完全に静的なページ」です。

2.SSG + Prefetch

SEOは意識。事前（ビルド時）にデータベースから取得してきた情報を埋め込んで返します。商品一覧など。

2-1. SSG + Prefetch + ISR

Next.jsはビルド時の情報が使われてその後情報が更新されません。後々情報を更新したい場合はISR（DBの最新データで静的サイトを作り直す技術）を使って更新します。

3.SSG + Client side fetching

DashboardなどのようにSEOを意識する必要がないページかつ最新情報を取得したい場合で使います。通常の「create-react-app」と似たようなレンダリングの仕組みになります。

この場合は、Client side fetching(通常のAxiosなどのAPI経由でデータを取得する方法)を使ってページを表示させます。

4.SSG + Prefetch + Client side fetching(useSWR)

News Siteなど。SEOを意識したいし、データをリアルタイムで更新したいような場合に使います。初期表示時に事前にDBから取得してきた情報を返します。その後、API経由で情報を取得して内容を書き換えます。

4-1. SSG + Prefetch + Client side fetching(useSWR) + ISR

Next.jsはビルド時の情報が使われてその後情報が更新されません。後々情報を更新したい場合はISR（DBの最新データで静的サイトを作り直す技術）を使って更新します。

CSR（クライアントサイドレンダリング）とは？

初回ロードが重くなりがちで、原始的なクローラーではコンテンツを取得できない可能性があるのでSEO的に不利。ただ、クローラーがJavaScriptを実行できるようになってきているので、この問題は解決されつつある。

SSR（サーバーサイドレンダリング）とは？

サーバー側で処理（データフェッチ等を）し、HTMLを構築してクライアント側に返す方式（一周回って従来のWebアプリと同じ）

リクエストの都度HTMLを生成するので、SSGと違って頻繁に更新されるコンテンツにも対応ができる。

Next.jsでは、SSR用に「getServerSideProps」というメソッドが存在する。

SSRの問題点

「ユーザーのリクエストを受けてからHTMLを構築するので、レスポンスに時間がかかってしまう」という課題があった。

SSRを使った方が良い条件

• ページに動的コンテンツが含まれて頻繁に更新される場合。(SSGだと動的データの整合性を確実に担保できない。）
• SEO対策やOGP対応のためにpre-renderが必要
• ISRのpre-fetchで大量のHTMLが生成されてしまい、サーバーへの負荷が懸念されるケース

SSG(静的サイトジェネレータ)とは？

ビルド時にHTMLを生成しておく方式。CDNにキャッシュすることによりSSRよりも高速にサイトを表示させることができる。

二つのケースがある。

外部からデータをフェッチする必要があるケース

このケースでは、「getStaticProps」を使用する。これを使うとビルド時にサーバー側で外部データをフェッチしてそのデータを使用してHTMLを生成する。

外部からデータをフェッチする必要がないケース

 

SSGの問題点

ビルド時に大量のデータを取ってくる事は現実的ではない点

この問題は、getStaticPathsのフォールバックが解決してくれる。

更新が頻繁なサイトに対応できない点

ISRが解決してくれる。