レンダリング手法
Reactを学んでいく中で、Next.jsというさらに便利にReactを用いることができるフレームワークについて知り、そしてNext.jsには素晴らしいレンダリングの手法が採用されているということを知り、一度レンダリングの種類と中身について軽く整理したいと思いました。
時系列
恐らくCSR->SSR->SSG->ISRの流れのようです！
CSR(クライアントサイドレンダリング)
CSRはもっとも無難？なレンダリングの手法
- ユーザーがブラウザーにてURLを入力する（リクエスト）
- HTML、CSS、JavaScriptなどを返却する（HTMLは基本的な構造のみ 例：
<div id="app"></div>など） - ブラウザ側でJavaScriptを実行してHTMLを生成する
メリット：ページ遷移が速い。サーバーの負荷が軽い。
デメリット：初回表示が遅い（ホワイトスクリーンが見られることがしばしばある）。SEO対策が難しい。
主な言語
- React
- Vue
- Angular
適したサイト
- 管理画面
- SNS
理由
- 多くの処理がクライアント側で行われるため,サーバーの負荷が軽いほうが良い
- リアルタイムで更新されるので、迅速なレンダリングが求められるため
SSR(サーバーサイドレンダリング)
- ユーザーがブラウザーにてURLを入力する（リクエスト）
- サーバー側でHTMLを生成する。
- 生成したHTMLをレスポンスとして返却する。必要に応じて、CSSやJavaScriptファイルも返却する。
- ユーザー側が受け取ったHTMLを解析し、DOM（Document ObjectMode）を生成し、CSSを適用したり、JavaScriptを実行したりする。
メリット：初回ロードが速く、SEOに有利。
デメリット：ページ遷移の度にサーバーへの通信が発生する。
主な言語
- Next.js(React + Node.js)
- Nuxt.js(Vue + Node.js)
適したサイト
- ブログ
- ニュース
理由
- 多くの処理がクライアント側で行われるため,サーバーの負荷が軽いほうが良い
- リアルタイムで更新されるので、迅速なレンダリングが求められるため
SSG(スタティックサイトジェネレーター)
- ユーザーがブラウザーにてURLを入力する（リクエスト）
- サーバー側で生成したHTMLを返却する。（この際、サーバー側では既にデータが埋め込まれた状態の静的なHTMLファイルが生成されている。fetchなども実行された状態になる。またCSSもビルド時に同時にビルドされた状態が返却される）
メリット：ページ表示速度が速く、SEOに効果的
デメリット：コンテンツが更新されたら再ビルドする必要がある。
主な言語
- Next.js(React + Node.js)
- Gatsby(React + Node.js)
- Astro（Node.js + (React | Vue | TypeScript...)
適したサイト
- ブログ（更新頻度が高くない）
- ポートフォリオサイト・企業サイト
理由
- 更新頻度が高くないサイトに適している。サーバー側であらかじめビルドされたHTMLが生成されているので、ページ表示速度も速くSEOに効果的であるため。
ISR(インクリメンタルスタティックリジェネレーター)
- ユーザーがブラウザーにてURLを入力する（リクエスト）
- サーバー側で生成したHTMLを返却する。（この際、サーバー側では既にデータが埋め込まれた状態の静的なHTMLファイルが生成されている。fetchなども実行された状態になる。またCSSもビルド時に同時にビルドされた状態が返却される）
- 指定した時間間隔でページが再生成される。また、差分を検出して更新される。
メリット：ページ表示速度が速い。ページが再生成されるので更新頻度が高いサイトにも使用できる。
デメリット：リアルタイムな更新を必要とするサイトには対応しづらい。
主な言語
- Next.js(React + Node.js)
適したサイト
- ブログ（更新頻度が高い）
- ポートフォリオサイト・企業サイト
理由
- 更新頻度が高いサイトにも適している。サーバー側であらかじめビルドされたHTMLが生成されているので、ページ表示速度も速くSEOに効果的であるため。
まとめ
ちょっとありきたりというか、質の低い記事になってしまった気がするのですが、自分の中ではなんとなく整理できた気がします！