【Next.js】CSR, SSR, SSG, ISR について、それぞれの特徴を解説する
対象読者
・Reactの学習を基本部分は一通り終えた。
前提知識
Next.jsとは、Reactの機能を拡張するためのフレームワークである。
Next.jsを導入することで、Reactのみで使用する場合と比べて以下のような利点がある。
- 直感的なルーティング設計ができる。
- レンダリングをサーバサイドで行うことで、パフォーマンスが向上する。
- 画像をサーバからフェッチするときに不要なデータをトリミングすることで、パフォーマンスが向上する。
- ・・・etc
この記事では上記リストの2.について見ていく。
ReactとNext.jsのレンダリング手法は、ReactではCSR、Next.jsではSSR/SSG/ISRと呼ばれる。
CSR （Client Side Rendering）
Reactのレンダリング手法。
URLに初回アクセスすると、サーバからレスポンスとしてレンダリングされる前の状態の情報が送られてくる。
受け取った情報をもとにクライアント側でレンダリングを行う。
Reactは基本的にSPAであるため、初回レンダリングが重くなることが多い。（ページが１つしかなく、そのページに大量の情報が含まれているため）
つまり、Reactは規模の小さいアプリケーションの場合はSPAのためページ遷移が高速でできてよいが、規模が大きいアプリケーションになると、初回読み込みが重くてよくない、ということになる。
SSR （Server Side Rendering）
Next.jsのレンダリング手法。
ページアクセスが発生すると、サーバ側で必要なページをレンダリングしてそれがクライアント側に送られる。
クライアント側ではレンダリングに時間を割かなくていいのでその分処理が軽くなる。
SNSのタイムラインなど、更新頻度が多いページに対してよく用いられる。
（Next.jsアプリ内で、SSR,SSG,ISRはページごとに設定できる）
SSG （Static Site Generator）
Next.jsのレンダリング手法。
初回ビルド時にサーバ側でレンダリングしてクライアント側に送られる。
ログインページ、エラーページなど、更新されることがほとんどないページに用いられる。
ISR （Increment Site Rendering）
Next.jsのレンダリング手法。
ページアクセスが発生するたびにサーバ側に保存してあるキャッシュ情報（CDN）からレンダリング済みデータをクライアント側に送る。ただし、一定時間経過するたびにキャッシュに保存してある情報が更新される。
どのくらいの時間間隔でキャッシュを更新するかは自由に設定できる。
このレンダリング手法は、SSRとSSGの中間に当たるもので、たとえばブログの詳細記事ページなど、更新がなくはないが頻度が多くもないページに使われる。
Discussion