一般的なWebアプリケーション、SPA、SSR、Jamstackそれぞれの仕組みや特徴などについて調べ、自分なりに図を作成してまとめてみました。
目次
一般的なWebアプリケーションの場合
よくある従来のWebアプリケーションの動きです。
一連の処理の流れ
- クライアント側からHTTPリクエストが送られる
- サーバ側でDBなどからデータを取得する
- DBからデータが返却される
- サーバがHTMLファイルを生成・返却
- ブラウザでHTMLファイル内のJSを実行
デメリット
- ヘッダーなどの変更がない部分のHTMLも毎回サーバから送信されるので処理に時間がかかる
SPA(Single Page Application)
SPAとは「Single Page Application」の略で、単一のページで遷移をすることなくコンテンツの切り替えを行うWebアプリケーションです。
一連の処理の流れ
- クライアント側からHTTPリクエストが送られる
- サーバ側でDBなどからデータを取得する
- DBからデータが返却される
- サーバがHTMLファイルを生成し、レスポンスとしてHTML・CSS・JSが返却される
- クライアント側から差分の更新に必要なデータのみのリクエストが送られる
- サーバ側でDBなどからデータを取得する
- DBからデータが返却される
- レスポンスとしてJSONなどのデータが返却される
- ブラウザ側のJSで差分のみを更新してHTMLを生成
特徴
- 1枚のHTMLに対してJSで動的に変更を加えながら画面の描画を実現
- ページ全体をロードするのは初回のみで、2回目以降はサーバからJSO
- データを受け取ることで必要箇所のみリロード
メリット
- 2回目以降は差分のデータのみを要求するので処理が早い
- 画面遷移が発生しないのでアニメーションをリッチにできる
デメリット
- JSのコードが増えるので初回のページ表示は遅くなる
- 実装コストが増える
- ブラウザでアクセスした後にレンダリングされるので、一部コンテンツが表示されずSEOに弱い
SSR(Server Side Rendering)
SSRとは「Server Side Rendering」の略で、サーバサイドでHTMLを生成して描画する手法です。
一連の処理の流れ
- クライアント側からHTTPリクエストが送られる
- サーバ側でDBなどからデータを取得する
- DBからデータが返却される
- サーバ内でJSを実行し、動的にHTMLファイルを生成される
- レスポンスとしてHTMLが返却される
特徴
- 本来JSで行う画面の書き換え処理などをサーバ側で実行させる
- 初期表示の際にユーザが待たされることがなくなる
メリット
- サーバ側でHTMLを生成するので、ページ表示が早い(SPAの欠点である初回読み込みの遅さがない)
- 検索エンジンのクローラが完全に描画されたページを直接解析するため、SEOに強い
デメリット
- サーバ側の負担が増える
- Node.jsを実行できるサーバーが必要になる
Jamstack
Jamstackは、SSG等の要素技術を組み合わせて「静的サイトと動的サイトのよいとこどり」をしたようなサイトを実現する開発手法です。
JAMはそれぞれJavaScript・API・ Markupを表しています。
一連の処理の流れ
- 開発者が事前にSSG(静的サイトジェネレータ)でビルドする
- ビルド時にサーバへアクセス
- サーバ側でDBなどからデータを取得する
- DBからデータが返却される
- レスポンスとしてJSONなどのデータが返却される
- ビルドが完了し、静的ファイルが生成されたらホスティングサービスにデプロイ
- ユーザは静的ファイルが格納されたホスティングサービスにアクセス
- ホスティングサービスからHTMLが返却される
特徴
- Webサイトの各ページのHTMLファイルは事前に静的サイトジェネレータで生成
- ブラウザからアクセス時にCDNから配信している
- Webサーバに依存しないサーバレスな構成
閲覧専用でユーザごとにコンテンツの出し分けがないようなWebサービスに最も適していると考えられます。ユーザ認証等がないWebメディアやコーポレートサイトで効果を発揮しそうです。
また、Jamstack構成を実現させるために、以下のサービスが使われます。
- 静的サイトジェネレータ
- ヘッドレスCMS
- ホスティングサービス
メリット
- デプロイ前にあらかじめ静的ページを生成することでCDN配信が可能となり、より高いパフォーマンスを実現
- コンテンツ等は予め静的ファイルとしてホスティングしているため、サーバ側のプロセスが必要最低限のAPIに集約され、脆弱性に対する攻撃対象の減少が期待
- SSRのようなNode.jsが動作するサーバは不要(ホスティングのみ)
- ページ遷移の高速化・サーバ側でレンダリングしたHTMLを読み込むことで、SEO効果が期待
デメリット
- ページ数が多い場合はビルド時に負荷が大きい
- データ変更が即時反映されない(毎回ビルドが必要)
以上、ざっくりですがそれぞれの違いや仕組みなどについてまとめてみました。