レンダリング手法

Reactを学んでいく中で、Next.jsというさらに便利にReactを用いることができるフレームワークについて知り、そしてNext.jsには素晴らしいレンダリングの手法が採用されているということを知り、一度レンダリングの種類と中身について軽く整理したいと思いました。

時系列

恐らくCSR->SSR->SSG->ISRの流れのようです！

CSRはもっとも無難？なレンダリングの手法

メリット：ページ遷移が速い。サーバーの負荷が軽い。

デメリット：初回表示が遅い（ホワイトスクリーンが見られることがしばしばある）。SEO対策が難しい。

メリット：初回ロードが速く、SEOに有利。

デメリット：ページ遷移の度にサーバーへの通信が発生する。

ユーザーがブラウザーにてURLを入力する（リクエスト）
サーバー側で生成したHTMLを返却する。（この際、サーバー側では既にデータが埋め込まれた状態の静的なHTMLファイルが生成されている。fetchなども実行された状態になる。またCSSもビルド時に同時にビルドされた状態が返却される）

メリット：ページ表示速度が速く、SEOに効果的

デメリット：コンテンツが更新されたら再ビルドする必要がある。

ユーザーがブラウザーにてURLを入力する（リクエスト）
サーバー側で生成したHTMLを返却する。（この際、サーバー側では既にデータが埋め込まれた状態の静的なHTMLファイルが生成されている。fetchなども実行された状態になる。またCSSもビルド時に同時にビルドされた状態が返却される）
指定した時間間隔でページが再生成される。また、差分を検出して更新される。

メリット：ページ表示速度が速い。ページが再生成されるので更新頻度が高いサイトにも使用できる。

デメリット：リアルタイムな更新を必要とするサイトには対応しづらい。

ちょっとありきたりというか、質の低い記事になってしまった気がするのですが、自分の中ではなんとなく整理できた気がします！