SSR と CSR の違いを図で表してみた

はじめに

SSR と CSR の違いを説明するために、一目で把握できる資料が欲しかったので作成してみました。

どっちがどういうときに有利なのか、といった考察はしません(うまくまとめる能力もないので😅)。

以下の違いを表現することが主な目的です。

• 最終的な HTML が生成されるタイミング
• ダウンロードされるデータ量

用語解説

• SSR
  • Server-side Rendering の略
• CSR
  • Client-side Rendering の略

概略図

まとめ

自分の表現力の乏しさにはがっかりですが、実際に説明するときにうまく使えれば良いなぁ、と思ってます😀。