Help us understand the problem. What is going on with this article?

SPA、SSR、プリレンダリングの違いをまとめてみた

Nuxt.jsを使い始めましたが、SPAとSSRの違いをあまり理解していなかったので、それぞれの動作と違いをまとめました。
SSRについて調べる過程でプリレンダリング(事前描画)についても学んだことも一緒にまとめています。

普段の業務ではコードそのものに目が行きがちですが、動作の違いやメリット/デメリットをしっかり理解した上で技術選定をすることが必要だと感じます。

間違っている点があればマサカリください!

HTML/CSS/JacaScriptのみ

シンプルにHTML/CSS/JacaScriptのみで動くアプリケーションの場合

動作の流れ

Group.png

1.クライアント側からHTTPリクエストが送られる
2.サーバーがhtmlファイルを生成
3.サーバーからレスポンスとしてHTML/CS/JSが返ってくる
4.ブラウザ側でhtmlファイル内のJSを実行。ここにAjaxなど再度サーバーとの通信が必要な処理が含まれていた場合は、再度サーバーへリクエストを送る。

デメリット

  • 変更がない部分(ヘッダーなど)のHTMLも毎回サーバーから送信されるので処理に時間がかかる

SPA(Single Page Application)

ページ遷移をすることなく、同一のページ内でコンテンツのみを切り替えるアプリケーション

動作の流れ

初回のページ読み込み

Group.png

先ほどと同様に、クライアントからのリクエストに応じてサーバーからHTML/CS/JSが返ってくるので、クライアント側(ブラウザ)でjsを実行してページを表示します

2回目以降

Group 2 (1).png

1.クライアント側から差分の更新に必要なデータのみのリクエストが送られる
2.サーバー側でjsonデータを用意
3.レスポンスとしてjsonやXML形式でデータが返ってくる
4.ブラウザ側のjsで差分のみを更新してHTMLを生成する

先ほどとの一番の違いは、クライアント側の操作によって新たに必要となった差分のデータのみをHTTPリクエストで要求することです。
この際のリクエストにはAjaxなどが使われ、サーバーからのレスポンスもjsonデータなどです。

メリット

  • 2回目以降は差分のデータのみを要求するので処理が早い

デメリット

  • JSのコードが増えるので初回のページ表示は遅くなる

SSR(Server Side Rendering)

SPAではブラウザで行われていたJSの実行とHTML生成をサーバー側で行う技術

動作の流れ

Group 3.png

1.クライアント側からリクエストが送られる
2.サーバーが更新後のHTMLを生成してクライアントに返す
3.ブラウザ側でHTMLを表示する

AjaxなどでHTTPリクエストを送信する部分はSPAと同様です。SPAとの違いはHTMLをクライアント側(ブラウザ)ではなくサーバーで行う点にあります。

メリット

サーバー側でHTMLを生成するので

  • ページ表示が早い(SPAの欠点である初回読み込みの遅さも無い)
  • ユーザーの通信環境に左右されにくい

デメリット

  • サーバー側の負担が増える
  • Node.jsを実行できるサーバーが必要になる
  • フロントエンド側でのエラーハンドリングが重要になる(不適切なエラーハンドリングがサーバー全体に影響を及ぼす)

プリレンダリング(事前読み込み)

ビルド時にindex.htmlのような1つのHTMLファイルを生成するのではなく、ページごとにHTMLファイルを生成する技術

動作の流れ

Group 5.png

1.クライアント側からリクエストが送られる
2.ビルド時にあらかじめ作られていたHTMLをサーバーが返す
3.レスポンスとしてHTMLを受け取り、ブラウザ側でページを表示する

Vue SSR ガイドでSSRとの比較がされています。
SSRとの大きな違いは、クライアントからのリクエスト時にサーバーを使用してHTML生成をするか、ビルド時にHTMLファイルを生成するかです。

メリット

  • 静的なページへ遷移するのと同様の動作なので高速
  • SSRのようなNode.jsが動作するサーバーは不要

デメリット

  • ページ数が多い場合はビルド時のHTMLが増えるので向いていない

参考

Vue SSR ガイド
ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点
プリレンダリングを用いてVue.jsのSPAをビルドする導入から設定まで
SPA(Single Page Application)の基本

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした