SPAとSSRの違いについて（備忘録）

概要

ポートフォリオでアプリを制作している中でSPAとSSRの違いについて学習したので備忘録として記載しておきます。

SPAとSSRの違い

簡単に言うと２つの主な違いはレンダリング方法が異なるということです。
それぞれの特徴は以下の通りです。

SPA

SPAはSingle Page Applicationの略称です。
クライアント側でレンダリングを実行するので、CSR（Client Side Rendring）とも呼ばれます。

仕組み

1. ホスティングサーバーにリクエストを送り、HTML、CSS、JavaScriptファイルが返却されます。
2. 受け取ったファイル内の各データを取得するためにJavaScirptがAPIを叩きAPIサーバーからデータを取得します。
3. APIから返却されたデータをもとにクライアント側で初期レンダリングされ、ブラウザが表示されます。

メリット

• ページ遷移の際にサーバー側へ問い合わせをする必要がないため、各ページの描画が早い。

デメリット

• クライアント側でレンダリングを行うため、初期描画に時間がかかる。

SSR

SSRはServer Side Renderingの略称です。
サーバー側でレンダリングを行います。

仕組み

1. ホスティングサーバーが最初の一度だけ、APIサーバーにリクエストを送りHTMLファイル内のデータを取得します。
2. データを取得したあとホスティングサーバー側で先にレンダリングが行われます。
3. ホスティングサーバーからレンダリング済みのファイルが返却され、ブラウザが表示されます。

※ 初期レンダリング後はSPAと同様にクライアント側からAPIサーバーのデータを取得する。

メリット

• SPAのメリットに加えて、サーバー側でレンダリングが行われるため__初期描画が早い__。

デメリット

• Node.jsを実行できる環境が必要。

参考文献

SPA, SSR, SSGの違いについて図解でまとめてみた