Rso's Jotter

日々の開発の知見のメモやその他雑記

Nuxt.js の SSR, SPA時のイベント発火の違いを整理してみました

私は去年からNuxt.jsを真面目に触るようになったのですが、とりあえず動くものを作る優先だったので、 挙動の分かりやすいSPAモードでの開発をずっと行っていて、Nuxt.jsのSSRの機能を全く使っていませんでした。 最近になってパフォーマンスをチューニングしたいという話題があり、SSRの使用を検討していたのですが、どうもよくSPAモードでのモードとSSR(universal)モードの挙動の違いが理解できていませんでした。

そこで、universalモードとSPAモードでのイベントの発火状態を以下の表で整理してみました。

f:id:rso:20200126114530p:plain
SSR, SPAのイベント発火の違い

Webや公式リファレンスを読んだあとに自分の理解の整理で書いただけなので、あっているか分からないですが... ポイントは以下のようなところです。

  • SSRは初回ページアクセス時に実行される。それ以外(VueRouterなど)の遷移ではSSRは行われない。その挙動はSPAモードと同じ。
  • nuxtServerInitはサーバサイドでのみ実行される。SPAモードには存在しない。
  • SSR初回実行時は middleware, validate, asyncData, fetch はサーバサイドでのみ実行され、クライアントサイドでは実行されない。ただし初回アクセス時以降はクライアントサイドで実行される。
  • SSR初回実行時は created は サーバサイド、クライアントサイド両方で実行される。

上記をみてこうやって考えると、SPAモードは楽でいいんだけどなぁとも思います(さらにデプロイも超絶に楽)が、パフォーマンスを考えると SSRの選択肢は有力だと思うので、状況を見て取り入れていきたいなぁと考えています。

また、上記の挙動の確認には以下のプログラムを使用させていただきました。 github.com