SSR vs Ajax(+ PushState)
Ajax + PushStateを利用すると、SSR(画面の全読み込み)をせずに、同等の画面遷移を実装する事ができます。一見同じ動きに見える両者について、それぞれどんなメリット・デメリットがあるかを考えます。
- SSR時に描画に必要なデータを渡しておけば、初期状態でデータが存在するので、空表示(or ローディング中表示)を作る必要がない。
- 住所入力画面での 郵便番号⇔住所 の対応の一覧データのような膨大なデータを埋め込むのには向いてない(こういうシナリオ の場合は、Ajaxを使わざるを得ない)
- 実際にユーザが利用しないかもしれないデータ(例: クリックすると表示されるチャート)も埋め込む必要がある。(= 不要なデータを埋め込むことになる)
- ボタンのクリック時など、必要なタイミングでデータを取得するのでSSR時にデータを含める方式と比べてレスポンスのサイズが小さくなる（必要なデータを必要なタイミングで取得する）
- Ajax通信中はデータが無い状態になるので、空表示(or ローディング中表示)を作る必要がある。
- Ajax通信中にネットワーク(WiFi/LAN)の接続が切れたりして、データが返却されない場合を考慮する必要がある。(SSR時はそもそもページが表示されない。という動きになるので、一部だけ描画されるという事が起こらない)
- SPA(SSRを併用しない)の場合は、初期表示時にデータが無いシナリオ(= 初期状態でデータがnullでも表示できるように)を考慮する必要がある。
開発案件をしていて、要件的にSSR + Ajaxでも十分なのでは？というプロダクトにSPAが採用されている事も少なくありません。それぞれの差(メリット・デメリット)を正しく理解しておきましょう。
最終更新 3yr ago