Nuxt.jsのSSRとCSRのライフサイクルがよく分からず、検証してみたので備忘録として残しておきます。
今回使用しているバージョンはNuxt 2.12です。
SSRとCSR
サーバーサイドレンダリング(SSR)とは、サーバー側でHTMLを描画してブラウザに直接表示する手法です。
詳しくは公式ガイドに載っています。
Vue.js サーバサイドレンダリングガイド | Vue SSR ガイド
Nuxt.jsでSSRを使う場合は、
となっています。
ライフサイクル
ライフサイクルを確認するためにこのようなコードを用意しました。
<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タブを確認してみると、このような結果になりました。
下記の順番でライフサイクルフックが実行されています。
(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>
をクリックしてこのページに遷移してみます。
すると、このような結果になりました。
下記の順番でライフサイクルフックが実行されています。
(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オブジェクトにアクセスできます。