dev blog

プログラミングめも

Nuxt.js|SSRのライフサイクル

Nuxt.jsのSSRCSRのライフサイクルがよく分からず、検証してみたので備忘録として残しておきます。
今回使用しているバージョンはNuxt 2.12です。

SSRCSR

サーバーサイドレンダリング(SSR)とは、サーバー側でHTMLを描画してブラウザに直接表示する手法です。
詳しくは公式ガイドに載っています。
Vue.js サーバサイドレンダリングガイド | Vue SSR ガイド

Nuxt.jsでSSRを使う場合は、

  • 初回の描画時はSSRCSR
  • それ以降の再描画時はCSRのみ

となっています。

ライフサイクル

ライフサイクルを確認するためにこのようなコードを用意しました。

<template>
  <div>
    <h1>SAMPLE</h1>
    <nuxt-link to="/blue">リンク</nuxt-link>
  </div>
</template>

<script>
export default {
  layout: 'top',
  data() {
    console.log('data / server: ' + process.server)
    return {
      value: ''
    }
  },
  asyncData() {
    console.log('asyncData / server: ' + process.server)
  },
  fetch() {
    console.log('fetch / server: ' + process.server)
  },
  beforeCreate() {
    console.log('beforeCreate / server: ' + process.server)
  },
  created() {
    console.log('created / server: ' + process.server)
  },
  beforeMount() {
    console.log('beforeMount / server: ' + process.server)
  },
  mounted() {
    console.log('mounted / server: ' + process.server)
  }
}
</script>

process.serverは、SSRの場合にtrueを返します。
このページを読み込んでconsoleタブを確認してみると、このような結果になりました。

f:id:koz2020:20200510062745p:plain

下記の順番でライフサイクルフックが実行されています。

(SSR) asyncData 
(SSR) beforeCreate *
(SSR) data *
(SSR) created *
(SSR) fetch

(CSR) beforeCreate *
(CSR) data *
(CSR) created *
(CSR) beforeMount
(CSR) mounted

初回描画時は、SSR -> CSRという順番でライフサイクルフックが実行され、beforeCreate data created(*)はどちらでも実行されていることが分かります。

次に、再描画時の動作を確認するために、Nuxt.jsアプリケーション内の別のページから<nuxt-link>をクリックしてこのページに遷移してみます。
すると、このような結果になりました。

f:id:koz2020:20200510064109p:plain

下記の順番でライフサイクルフックが実行されています。

(CSR) asyncData 
(CSR) beforeCreate
(CSR) data
(CSR) created
(CSR) beforeMount
(CSR) fetch
(CSR) mounted

再描画時はCSRのみで、SSRのライフサイクルフックは実行されていません。

いつからwindowオブジェクトやDOMにアクセスできるのか

Nuxt.jsで開発しているときにwindowオブジェクトにアクセスするとwindow is not definedというエラーが出ることがあります。 これはSSRでまだwindowオブジェクトが存在していないからです。 CSRのみでwindowオブジェクトにアクセスできます。

まとめ

  • 初回描画時はSSR -> CSR、再描画時はCSRのみ
  • 初回描画時のライフサイクルは、asyncData -> beforeCreate * -> data * -> created * -> fetch -> beforeMount -> mounted
    (*SSRでもCSRでも実行される)
  • windowオブジェクトとDOMにアクセスできるのは、CSRのみ