SSR vs Ajax(+ PushState)

PushState?

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

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が採用されている事も少なくありません。それぞれの差(メリット・デメリット)を正しく理解しておきましょう。