nuxtのasyncData/fetchでサーバかクライアントか判定出来ない

Question

nuxtでvueファイルを編集しています。asyncDataメソッドの中で、サーバかクライアントか判定したいのですがどうすればよいでしょうか？

公式 https://nuxtjs.org/api/context では、asyncDataメソッドの引数に渡される Context のisClientプロパティで判定…していたが、非推奨になったのでprocess.clientを使え。と書いてありますが、クライアント側ではprocessは常にundefinedです。

<template>
  <div class="container">
  </div>
</template>

<script lang="ts">
import Vue from "vue";

// https://vuex.vuejs.org/ja/api/
export default Vue.extend({
  asyncData({store,isClient}:any):any{
    // ここで、サーバかクライアントかの判定をしたい
  },
});
</script>

<style lang="scss" scoped>
</style>

nuxtは2.9.2 を使っています。

Answer 1

Nuxt.jsのバージョンはいくつになりますでしょうか。
Nuxt.js@2.9.0環境では、上記のコードに「console.log(process.client)」を追加すると、
クライアントサイド: true
サーバサイド: false
と正常に動きました。

v2.7.1未満の場合は、「process is not defined」エラーが出るissueが挙がっていましたので、ご確認ください。
https://github.com/nuxt/nuxt.js/issues/5721

Comments

[Fushihara]

processなんてオブジェクトがそもそもクライアント側には無いでしょ。と思っていたけど、ここはnuxtがコンパイル時にプリミティブ型に変換する部分だったんですね。ありがとうございます。
devtoolで確認したけど、devtoolのソースはsourcemapが効いて元のvueファイルが見えてたから気付かなかった。sourcemap無効化したらtrue に置換されてた。