てりーのフロントエンドBLOG

CSR/SSR/SG/ISRについてまとめ

その他

こんにちは、フロントエンドエンジニアのてりーです。

Remixのキャッチアップをしていた際にCSR/SSR/SG/ISRあたりの理解であやふやな部分があったので、時間をとってそれぞれの原理と特徴を理解しました。

目次

CSR(クライアントサイドレンダリング)

原理

直接ブラウザでページをレンダリングします。

すべてのロジック、データフェッチ、テンプレーティングやルーティングは、サーバーではなくクライアント上で扱われます。

メリット

  • クライアント側でJavaScriptを読み込んでページを描画、ページ遷移なくインタラクションが高速。(SPAなど)
  • ページ遷移が少なく画面全体の再描画がない為、通常のHTMLのみのレンダリングよりUI/UXが優れている。
  • Angular・React・Vueのデフォルト設定

デメリット

  • JavaScriptの量によっては初回アクセスが重くなる
  • SEO的に不利、OGP設定ができない
  • クライアント側のデバイスにパフォーマンスが依存する

SSR(サーバーサイドレンダリング)

原理

サーバー側で処理（データフェッチ等を）し、HTMLを構築してクライアント側に返します。

リクエストに対して動的にHTMLを生成する為、

メリット

  • SEOに強い。
  • 初回のアクセス時はAPIを叩いていないので、描画が早い
  • クライアント側の環境でロジックを処理しないので、環境に依存しない

デメリット

  • サーバーを立てる必要がある。(Node.jsなど)
  • 処理をサーバー側に寄せるので、負荷が重い。場合によってはサーバー代が凄く高く付く。

向いているサービス

  • コンテンツの更新頻度が高く、大規模なサービス
  • 例)動画投稿やSNSなど。フロントとサーバーでしっかりと分ける場合が多い。

SG・SSG(サイトジェネレター)

原理

CSR/SSRはユーザーのリクエストを受け取ってから、HTMLを生成する為、時間がかかってしまうが、SGはビルド時にHTMLを生成しておき、ユーザーからリクエストがあった際に高速でページを表示する。

メリット

  • CDNにキャッシュさせる事ができ、SSRよりパフォーマンスに優れる
  • SEOに強く、レスポンスも高速
  • 動的にOGP作成も出来る

デメリット

  • ビルド以降はコンテンツの更新が出来ない

向いているサービス

  • 更新頻度の少ないサービス
  • 例)HP、ブログなど

ISR

日本語に訳すと定期的な静的再生成。

原理

リクエストに対してHTMLをバックエンドで生成する(SSR)、描画が遅くならないように前回作成したHTMLを先に提出する(SG)。

メリット

  • SGとSSRの良い所取り
  • SGと違いビルド後もコンテンツのコンテンツの更新が出来る
  • SGのビルドの重さが軽減されている
  • SSRほどサーバー側に負荷がかからない

デメリット

  • バックグラウンドでHTMLを生成している間は古いHTMLが描画される
    • イメージはTwitter。

まとめ

フロントエンドは目まぐるしく技術が変わるので、それぞれの特徴を把握しないと何が嬉しい技術なのか全く分からない状態でした。

逆に原理を理解出来ると一気にコードやドキュメントの意図が分かってくるんですね。

だから時間を取って、技術の特徴と原理を理解出来る様にしていかないと技術選定やアーキテクチャーなどの上位レベルの判断力がついていかないなーと思った今日この頃です。

参考記事