Skip to content
loading...

Nuxt.jsでSSRかブラウザ上の処理かを判定する方法の一つ

dala00 profile image dala00 twitter logo github logo ・1 min read  

Nuxt.jsで開発する場合、書いた処理がサーバーサイドレンダリング(SSR)時と、ブラウザ上での処理時の両方で実行される場合がある。それを判定したい時の方法。

正規の方法

正規の方法として、公式にも書かれているやり方。

window or document undefined?

こんな感じで判定できる。

if (process.browser) {
  require('external_library')
}

TypeScriptの場合

ただし、TypeScriptの場合はprocessの型にbrowserというプロパティが無いため、エラーになってしまう。そのため色々あれこれ型をうまい事設定する方法も可能かもしれないが、とりあえず古式ゆかしい方法でも判定することができる。

    if (typeof window !== "undefined") {
twitter logo DISCUSS
Discussion
markdown guide
Classic DEV Post from Jul 26 '19

🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

In the next post we are going to explore CSS @apply to supercharge what we talk about here....

dala00 profile image
Web engineer.