2018-10-29に更新

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

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

正規の方法

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

window or document undefined?

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

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

TypeScriptの場合

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

    if (typeof window !== "undefined") {
ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント