2022/10/1(土)　SPA, SSR, SSGの深堀り - 日々の積み上げブログ

MPAとは

ブラウザから「こういうページがほしい」とHTTPリクエストをもらうと、Webサーバーは内部でHTMLを組み上げ、JavaScriptやCSSと一緒にHTTPレスポンスを返します。重要なのは、この処理がページを遷移するごとに毎回行われるということです。
SPA, SSR, SSGって結局なんなんだっけ？

SPAと対照的にMPAでは、差分検出をすることなく、リクエストごとに毎回サーバー側でHTMLの作成が行われページ全体が更新されます。その結果、ページの更新に時間がかかるなどパフォーマンスが悪くなるデメリットがあります。
MPAでのパフォーマンスの問題を解決するひとつとしてSPAがあります。

SPAとは

初回リクエスト時にページの基本となるHTMLやCSS、JavaScriptをサーバーから受け取り、その後は必要なデータだけをサーバーに要求し、その変更差分を表示する方式で、ページを更新します。 SPA, SSR, SSGの違いについて図解でまとめてみた

ページ全体を読み込むのは、初回リクエスト時のみで、ページ更新時はサーバーからデータのみを受け取り変更差分を更新します。
ページの更新時にサーバーから受け取るデータは、JSON形式(JavaScript)で非同期に受け取ります。(Ajax通信)
ブラウザ更新時にJSON形式で受け取ったデータをもとにクライアント側(ブラウザ)で、HTMLを構築し、変更差分を反映させたページを作成します。
SPAは、クライアント側でページを生成するため、CSR（client side rendering）とも呼ばれます。
SPAは、更新時に非同期で必要なデータのみを受け取るため、更新時間を素早くできるなどのメリットがあります。
一方で、SPAは、SEOに弱いなどのデメリットもあります。

SPA（シングルページアプリケーション）サイトはGoogleに正しく認識されないため、SEO的には最悪だと言われてきました。そのため、SSR（サーバサイドレンダリング）をし、初回画面表示時は本来ReactやAngularが生成するhtmlを、サーバサイドでレンダリングしてクライアント側はそれを表示するだけ、という手法を用います。
SSR無しのReact・Angular製のSPAサイトはGooglebotにどれくらい認識されるのか？

SSRとは

ブラウザ上で初期データをレンダリングするのではなく、サーバー側でAPIを叩き、レンダリングまでを行ってからHTMLファイルを返却する。

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

SSRでは、初回リクエスト時にサーバーにリクエストが走ります。初回リクエストを受け取ったサーバーは、APIと連携をして初回データを反映したHTMLを構築し、そのHTMLをブラウザに返すレンダリングまでを行います。つまり、SSRでは、サーバー側でページを構築し、ページを返すレンダリングまでが行われるため、Server Side Renderingと呼ばれます。

2回目以降のリクエストは、直接ブラウザからAPIにアクセスしデータを取得しに行きブラウザ上でデータを反映したページを生成してレンダリングを行います。

SSRでは、SPAで挙げられる問題点を解決するためにSPAと組み合わせて使われるアーキテクチャです。 - 初回ページ表示までの時間が早い - SEOに強い

しかし、サーバー側の負担が大きくなるなどのデメリットもあります。

SSGとは

アプリケーションのビルド時(アプリケーションがサーバーにデプロイされるタイミング)にサーバーがAPIから必要な初期データ等を取得し、そのデータを反映したHTMLを作成します。

重要なのは、HTMLの作成が行われるタイミングがサーバーへのリクエスト時ではなく、ビルド時であることです。

よって、サーバーへリクエストがあると、ビルド時に作成済みのHTMLファイルを返却するだけなので、素早くページの更新ができるようになります。 SPA, SSR, SSGの違いについて図解でまとめてみた

SSGでは、事前にビルドしたタイミングで、サーバーがデータ取得を行いレンダリングが行われるので、そのことをプリレンダリング（事前描画）と言います。
- レンダリングとは、表示用のデータをもとに、内容を整形して表示することです。
SSGは、リクエスト時にかかるサーバーへの負荷がかからないのがメリットです。
ただし、ページ量が多いWebサイトなどだと、ビルド時にかかるサーバーへの負担が大きくなります。