🤔

SPA, SSR, SSGって結局なんなんだっけ?

2022/02/06に公開約5,400字

概要

SPA, SSR, SSGという技術用語を、業務の中でも、ネットの記事の中でもよく耳にするのですが、こういう感じかな?といううっすら理解のまま、今日まで過ごしてきてしまいました。

一応Gatsby.jsやNext.jsを触っている身として、これらの概念を整理できていないのはやばいのでは?と思い、この記事で脱知ったかぶりを図ろうとしている次第です。
内容に誤りがあった場合はご指摘いただけますと幸いです🙏

(MPA) -> SPA -> SSR -> SSG という順に説明をしていきます。

SPA

SPAの要旨をざっくり述べると、一つのページをまずホスティングサーバーから取得して、そのページを基軸に、表示したいものがあれば、そのための差分を都度APIから取得してくるアーキテクチャとなります。

こちらはSingle Page Applicationの略称で、一つのページをもとになんやかんやする、という考え方がその根幹に存在するため、このように名付けられているようです。

上の要旨だけだとよくわからないと思うので、まずはSPAと対比的な関係にある、MPA(Multi Page Application)というアーキテクチャに触れつつ、SPAにどのような良さがあるのかなどを紹介していきます。

MPA

MPAはRailsなどに代表されるバックエンド側のフレームワークのみを利用する形式で、従来よく使われてきました。

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

図に表すとこんな感じです。

ユーザーはボタンをぽちぽち押すたびに少しの時間待つことになる、重いページをとってくるときなどは特に時間がかかる、などのデメリットがあります。
一般的にSPAは、これらのデメリットを解消・緩和できるアーキテクチャという立ち位置になります。

改めて、SPA

上で述べたように、SPAは「一つのページをまずホスティングサーバーから取得して、そのページを基軸に、表示したいものがあれば、そのための差分を都度APIから取得してくるアーキテクチャ」です。

つまりMPAとは異なり、ページを取得してくるのは初回のみとなっており、2回目以降はAPIからデータを受け取ることで差分箇所のみ都度置き換えます。

図に表すとこんな感じです。




図にもある通り、2回目以降のページ遷移を表現するためのリクエスト処理はAjaxで実現しています。Ajaxはこちらの記事がわかりやすいです。

https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9

こうした形式では何がうれしいのでしょうか?

最も大きなメリットをあげると、ページ遷移の際に時間を食わなくなり、ユーザーがより心地よくWebサイトを触れるようになります
他には、これはAjaxのメリットかもしれませんが、JavaScriptを用いてページ内での変化・処理を表現できるので、ぬるぬる動くUIをつくることとができます。

しかし、こうしたメリットがあるものの、初回にページを取ってきたあと、JSが実行されてAPIにコンテンツを取りに行って戻ってくる間は多少もっさりとした時間がかかります。それがSPAの難点です。

それを解消・緩和するのが次に紹介するSSRになります。

補足

2行上で述べた、「初回にJSが実行されてAPIにコンテンツを取りに行く」というのは、つまりこういうことです。

初回にホスティングサーバーから返されるのは、おおよその場合以下のようなHTMLファイルになります。

<html>
  <head>
    <title>sample</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

これだと当然サイト上には何も表示されないので、script(JavaScript)がAPIに必要なコンテンツをがさっと取りに行く必要があります。2回目以降では、差分箇所のみAPIに取りに行けばよいので軽量ですが、初回レンダリングではこのコストを払う必要があります。

SSR

SSRはざっくり、ページ遷移のたびサーバーにリクエストが走り、そのままサーバー側でAPIと連携をしてレンダリングが行われ、生成されたHTMLをブラウザに返すアーキテクチャのことをいいます。

サーバー側でレンダリングが行われることを特徴としているので、Server Side Rendering(SSR)です。

SPAではブラウザ側で行っていたレンダリング処理を、サーバー側で行うので、サーバーサイドをJavaScriptで表現できるNode.jsが乗っかったサーバーの準備が必要になります。

この辺を調べていて思ったのは、これってRails等の役割がNode.jsに変わっただけで、MPAとそんなにやってること変わらないのでは?なぜ新しいアーキテクチャをわざわざつくったんだろう? です。

この辺をさらに調べていると、以下記事の引用箇所を見つけました。

サーバーサイドレンダリング(SSR)とは、その名の通りサーバー側でアプリケーションの HTML を生成し、レスポンスとして返すことを言います。
一般的に利用されている MPA(Multiple Page Application)では言うまでもなく行われていることなので、SSR というワードは自ずと SPA(Single Page Application)を構築する際のオプション機能を指します。

https://qiita.com/MasanobuAkiba/items/7adcfd5050150ac9ba36

引用を繰り返すかたちになりますが、つまりSSRは、それ単体で使用されるというより、SPAと組み合わせて使用されるアーキテクチャであるようです。

なので図に表すとこんな感じです。




この辺を踏まえてメリットを整理すると、まず一番に挙がるのは、レンダリングをサーバー側で行えるので、通常のSPAと比べて初回読み込みに時間がかからないということです。ユーザー体験がさらに上がりそうですね。

また厄介なレンダリング処理をサーバー側で行えるので、ブラウザの負担が減り、すなわちブラウザのスペックの高くない機器(スマホなど)でも安定した表示速度を保つことができます。

SSG

一方でSSRとよく比べられるのがSSGです。

SSGはざっくり、ビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を終わらせておき、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャです。

ビルドの都度静的なページ(サイト)を生成するので、Static Site Generation(SSG)です。
図に表すとこんな感じになります。

SSGの最大のメリットは、初回のビルドを前もって行っているため、ユーザーが「ページ見たい!」とリクエストをしてからかなりの速度で表示することができる点です。

しかしSSRと比べて、最新のデータを常に画面に反映できるわけではない(それをすると毎回ビルドをする必要がある)ので、ブログなどの情報更新の機会が少ないサービスで好まれます。



なんだか私の書き方だと、SSRの方がスタイリッシュで、SSGの使われ方は限定的、といったような感じになってしまいましたが、たとえばNext.js公式ではSSGの方を推奨しています。

https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering
  • Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
  • Server-side Rendering: The HTML is generated on each request.
    (中略)
    We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

Static GenerationがSSGです。
どうやら「SSGはパフォーマンスをブーストさせるよ〜、状況的にSSRしか選べないケースも多いけどね」と言っているようです。

もちろん要件次第ですが、じゃあなるべくSSGを使った方がよいんだろうなという感想を持ちました。

それぞれどのような技術で実現できるか

SPA

React, Vue.jsなどのフレームワーク単体、Rails+Reactなど

SSR

Next.js, Nuxt.jsなど

SSG

Next.js, Nuxt.js, Gatsby.jsなど(Next.js, Nuxt.jsはSSRとSSGを混在させた構成が可能)

所感

これまで3つ4つと紹介しましたが、必ずしも1つのWebサイトをつくるうえで1つのアーキテクチャに絞る必要はないようです。私も調べる中で、SPA+SSG, SSR+SSG, MPA+SPA+SSGなど、さまざまな構成を確認しました。

本記事では、それぞれのざっくり特徴をまとめたかたちなので、メリデメ(主にSEOまわり)をもっと詳細に知りたいという方は、ぜひ下記の参考記事群とかから調べてみてください。

参考記事

https://shimablogs.com/spa-ssr-ssg-difference
https://scrapbox.io/vue-yawaraka/SPAとMPAって何が違うの?SPAにしたほうがいい?
https://atmarkit.itmedia.co.jp/ait/articles/1702/22/news012.html
https://tech-blog.cloud-config.jp/2021-07-30-web-rendering/
https://zenn.dev/luvmini511/articles/1523113e0dec58
https://zenn.dev/akino/articles/78479998efef55
https://lealog.hateblo.jp/entry/2021/08/12/103111

Discussion

ログインするとコメントできます