SPA、SSR、SSG、ISRの違いまとめ

この記事は2021年3月20日に行われたU-lab内web班の勉強会内容です。

執筆 : 浅野

レンダリング方式まとめ

HTML/CSS/JacaScriptのみ

クライアントからのHTTPリクエストを基にサーバーがHTMLファイルを生成。ブラウザはサーバーからのHTML/CSS/JSを受け取り、HTML内のJSを実行。ヘッダーなどの変更がない部分も毎回サーバーから送信されるので処理に時間がかかる。

SPA(Single Page Application)

初回のページ読み込み

クライアントからのHTTPリクエストを基にサーバーがHTMLファイルを生成。ブラウザはサーバーからのHTML/CSS/JSを受け取り、HTML内のJSを実行。JSのコードが多いため初回のページ表示は遅くなる。HTMLのコードは少ない。

2回目以降

クライアントの操作に応じて新たに必要となったデータのみをHTTPリクエストで要求。差分のデータのみを要求する2回目以降は処理が速い。

SSR(Server Side Rendering)

SPAではブラウザ側で行われていたHTMLの生成とJSの実行をサーバー側で行う。サーバー側でHTMLを生成するため初回読み込みも早い。サーバー側でのJSの実行にはNode.jsが必要である。

SSG(Static Site Generation)

プリレンダリング(事前読み込み)のこと。SSRではリクエストがあるごとにサーバー側でレンダリングを行っていたのに対して、SSGはビルド時に事前にHTMLファイルのレンダリングを行う。更新頻度の少ないサイトやブログなどに利用される。更新頻度が多いサイトやページ量が多いサイトには不向き。

ISR(Incremental Static Regeneration)

SSGの挙動に加えて、一定時間ごとにバックグラウンドでデータの再取得と再レンダリングを行い、HTMLを再生成する。更新のタイミングでは前のデータを渡す。ユーザー体験の最高峰。