目次
直接DOMを操作したい！
まずはエラーが出るコードを確認する
export default {
mounted(){
this.sample()
},
methods:{
sample(){
console.log(document.getElementById("top"))
}
}
}Nuxt.jsではサーバーサイドレンダリング(本来クライアント側で行っていたJavaScriptによる描画をサーバー側で行う)なので、上記の処理を実行時には、DOMが参照できないので、エラーが出ます。
クライアント側でのプロセスで実行する
export default {
mounted(){
this.sample()
},
methods:{
sample(){
if(process.client){ // 追加
console.log(document.getElementById("top"))
}
}
}
}process.clientについて、しっかり理解してみる。
SSRとCSRのライフサイクルを簡単に確認する
SSRとCSRとは？
SSR = サーバーサイドでの処理
CSR = クライアントサイドでの処理
ライフサイクルについて
アクセス
↓
SSR：ページのcreated → ページのmounted
↓
CSR：ページのcreated → ページのmounted
つまり、記述した処理が２回読み込まれているわけです。
これをそれぞれの条件分岐したいときに使うのが、
proocess.serverとprocess.clientです。
if文を使って以下のように使い分けます。
if (process.server) {
console.log("サーバーサイドでの処理で実行されるよ")
}
if (process.client) {
console.log("クライアントサイドでの処理で実行されるよ")
}
