概要
技術選定の際に理解しておいた方が良い概念をまとめました。
CSR(Client Side Rendering)
画面描画までの流れ
- クライアントがサーバーへリクエストする
- サーバーが空のHTML, JavaScriptを含めてクライアントへレスポンスする
- クライアントが上記ファイルを使ってレンダリング(HTMLを生成)する
- クライアントは最初のレンダリング以降、必要なデータのみサーバーから取得する
メリット
- ページ更新時は必要なデータのみ更新すれば良いため、ページ遷移が速い
- Webサーバーとの重い通信が初期表示時のみとなる
デメリット
- 初回表示が遅いため、SEOに悪影響を及ぼす可能性が高い
対応しているフレームワーク、ライブラリ
- React
- Next.js
- Vue.js
- Nuxt.js
- Angular
適したユースケース
- 頻繁にデータを更新するアプリ
- チャット、SNSなど
- 部分的なコンテンツを更新するアプリ
- map系など
要するに
webサイトに初めてアクセスする時は初期ロードとレンダリングするから初期ロードには時間がかかるけど、それ以降は必要なデータのみロードするだけなので、動作はサクサク
SSR(Server Side Rendering)
仕組み
- クライアントがサーバーへリクエストする
- サーバー側でHTMLを生成しクライアントへレスポンスする
- ブラウザ側でサーバーから送られたHTMLを表示する
メリット
- サーバー側でレンダリングしているので初期表示が速い(SEO対策)
- ブラウザ側に負荷がかからない(ブラウザに依存しない)
デメリット
- サーバー側の処理に負荷がかかる
- ページ遷移ごとにサーバーからHTMLを取得するので通信が重く、更新が遅い
対応しているフレームワーク、ライブラリ
- Nuxt.js(Reactベース)
- Next.js(Vueベース)
- Angular Universal(Angularベース)
適したユースケース
- SEOが重要視されるサイト
- ニュースサイト
- リアルタイムで商品情報が更新されるサイト
- Eコマース
要するに
webサイトに初めてアクセスしたときはサーバー側でHTMLを生成（レンダリング）しているので、
すぐにブラウザに表示可能だけど、ただページ遷移が遅い。
SSG(Static Site Generation)
仕組み
- サーバー側は事前に静的ファイルをビルドしておく
- クライアントがサーバーへリクエストする
- サーバーは事前にビルドしておいた静的ファイルをクライアントへレスポンスする。
メリット
- 静的ファイルを返すだけなので非常に高速
デメリット
- リアルタイム更新ができない
適したユースケース
- 更新が少ないもの
- ブログ
対応しているフレームワーク、ライブラリ
- Gatsby,
- Next.js,
- Hugo,
- Jekyll
要するに
事前に静的ファイルをビルドしているので非常に高速だが、リアルタイム更新はできない
比較
| 特徴 | CSR | SSR | SSG |
|---|---|---|---|
| 初期ロード速度 | 遅い | 中 | 速い |
| SEO | 悪い | 良い | 良い |
| 動作性 | 高い | 中 | 低い |
| サーバー負荷 | 低い | 高い | 低い |
| 更新頻度 | 高い | 中 | 低い |
| 適したケース | 動的サイト | コンテンツ重視のサイト | ブログ |
まとめ
参考
https://tech-blog.rakus.co.jp/entry/20240927/rendering#%E6%A6%82%E8%A6%81