はじめに
混乱しやすい技術たちの名前を自分の備忘録として書く。
SSR (Server Side Rendering)
覚え方: サーバー(Server) 側(Side) でレンダリング(Rendering) を行う
処理: サーバーでhtmlを生成し、ユーザーが(各ページに)リクエストするとすぐに完全なページが返される(各ページで)。初回表示はサーバーで処理されるため、素早く表示される
CSR (Client Side Rendering)
覚え方: クライアント(Client) 側(Side) でレンダリング(Rendering) を行う
処理: ページのコンテンツは、ユーザーのブラウザでJavaScriptが動的に生成する。サーバーからは最低限のhtmlやデータが送られ、ブラウザがそれを元にページを作る
MPA (Multi Page Application)
覚え方: 複数の(Multi) ページ(Page) で構成されているアプリケーション(Application)
処理: 各ページが独立しており、ユーザーが新しいページに移動するたび、サーバーから新しいhtmlがロードされる。従来のウェブサイトに近い動作
SPA (Single Page Application)
覚え方: 1つの(Single) ページ(Page) (かのように)構成されているアプリケーション(Application)
処理: 最初に1つのhtmlページがロードされ、その後のページ遷移やコンテンツの変更はJavaScriptで動的に行う。実際にはページ全体がリロードされることなく、アプリケーションのように動く
SSG (Static Site Generation)
覚え方: 静的な(Static) サイト(Site) を生成(Generation)
処理: サイトをビルドする時点で、すべてのページを静的なhtmlファイルとして生成する。これらのファイルはサーバーに保存され、ユーザーがアクセスするとそのまま提供される
イメージ連想
SSR: サーバーが頑張る
CSR: クライアント(ブラウザ)が頑張る
MPA: ページごとに処理する
SPA: 全部一つの場所で処理する
SSG: あらかじめ作っておく
まとめ
1つのアプリケーションやサイトで上記の複数の技術が組み合わさって使われることもあるので
あまり難しく考えすぎないことも重要だと思った。