Vue.js

【Nuxt.js】直接DOMを操作したい!

直接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

つまり、記述した処理が2回読み込まれているわけです。

これをそれぞれの条件分岐したいときに使うのが、

proocess.serverprocess.clientです。

if文を使って以下のように使い分けます。

if (process.server) {
    console.log("サーバーサイドでの処理で実行されるよ")
}
if (process.client) {
    console.log("クライアントサイドでの処理で実行されるよ")
}

参考サイト

Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル

COMMENT

メールアドレスが公開されることはありません。