Webフロントエンド開発 🔰(WIP)
  • はじめに
  • 本編
    • おさらい
      • Webページが表示されるまで(と業務の境目)
      • Webページを構成する要素
    • 実例から作り方を学ぶ(基礎)
      • Button(ボタン)
      • Modal(モーダル)
      • Tab(タブ)
    • AJAX通信とUI更新
    • 入力フォーム(Form)の実装
      • FormタグのSubmit機能を使った送信
      • Formの各入力要素からJSでデータを取得したうえで、AJAXを使って送信
      • 高度なFormの実装(データバインディング)
    • アプリを作る(基礎)
      • Counter(カウンター) App
      • Todo(タスク管理) App
  • コラム
    • SSR vs SPA
    • MVVMとは
      • MVVMの実装例
    • SSR vs Ajax(+ PushState)
    • 開発者ツールの基本
    • Formatting
GitBook提供
このページ内
  • PushState?
  • SSR vs Ajax(+ PushState)
  • SSR
  • メリット
  • デメリット
  • Ajax(+ PushState)
  • メリット
  • デメリット
  • まとめ

役に立ちましたか?

  1. コラム

SSR vs Ajax(+ PushState)

前へMVVMの実装例次へ開発者ツールの基本

最終更新 5 年前

役に立ちましたか?

PushState?

は画面遷移をせずにURLのみを書き換える。というAPIとなります。これとAJAX(HTTPリクエスト)を組み合わせる事で、を実装できます。

SSR vs Ajax(+ PushState)

Ajax + PushStateを利用すると、SSR(画面の全読み込み)をせずに、同等の画面遷移を実装する事ができます。一見同じ動きに見える両者について、それぞれどんなメリット・デメリットがあるかを考えます。

SSR

メリット

  • SSR時に描画に必要なデータを渡しておけば、初期状態でデータが存在するので、空表示(or ローディング中表示)を作る必要がない。

デメリット

  • 住所入力画面での 郵便番号⇔住所 の対応の一覧データのような膨大なデータを埋め込むのには向いてない(こういうシナリオの場合は、Ajaxを使わざるを得ない)

  • 実際にユーザが利用しないかもしれないデータ(例: クリックすると表示されるチャート)も埋め込む必要がある。(= 不要なデータを埋め込むことになる)

Ajax(+ PushState)

メリット

  • ボタンのクリック時など、必要なタイミングでデータを取得するのでSSR時にデータを含める方式と比べてレスポンスのサイズが小さくなる(必要なデータを必要なタイミングで取得する)

デメリット

  • Ajax通信中はデータが無い状態になるので、空表示(or ローディング中表示)を作る必要がある。

  • Ajax通信中にネットワーク(WiFi/LAN)の接続が切れたりして、データが返却されない場合を考慮する必要がある。(SSR時はそもそもページが表示されない。という動きになるので、一部だけ描画されるという事が起こらない)

  • SPA(SSRを併用しない)の場合は、初期表示時にデータが無いシナリオ(= 初期状態でデータがnullでも表示できるように)を考慮する必要がある。

まとめ

開発案件をしていて、要件的にSSR + Ajaxでも十分なのでは?というプロダクトにSPAが採用されている事も少なくありません。それぞれの差(メリット・デメリット)を正しく理解しておきましょう。

PushState
SPA