Nuxt アプリケーションで `navigator`、`window`、および `document` が定義されていないのはなぜですか?

Nuxt アプリケーションで未定義のナビゲーター / ウィンドウ / ドキュメントに対処する方法

はじめに

Nuxt アプリケーションがナビゲーター、ウィンドウ、ドキュメントなどのグローバル ブラウザー変数にアクセスすると、未定義のエラーが発生する場合があります。これは、Nuxt フレームワークがサーバーサイド レンダリング (SSR) を利用しており、コードがクライアントでレンダリングされる前に最初にサーバーで実行されるためです。

ソリューション

この問題を解決する鍵は、ブラウザ依存のコードをクライアント側に制限することです。これを達成するには、いくつかの戦略があります。

1.条件付きコードのラッピング

コードを if (process.client) 条件内でラップして、クライアント側でのみ実行します。これにより、コードは SSR フェーズの後にのみ実行されることが保証されます。

<script>
  export default {
    mounted() {
      if (process.client) {
        // Your JS code here
      }
    },
  }
</script>

2. コンポーネント

を作成します。コンポーネントを使用して、クライアント上でのみレンダリングされる要素をラップします。これにより、SSR 中に実行されなくなります。

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

3.動的インポート

ライブラリが SSR をサポートしていない場合は、動的インポートを使用できます。これにより、クライアント側で必要になるまでライブラリの読み込みが遅延され、SSR 中にライブラリが実行されないようになります。

export default {
  components: {
    [process.client &&& 'VueEditor']: () => import('vue2-editor'),
  },
}

注:

• ラッピングコンポーネントは にあります。実行ではなくレンダリングをスキップします。
• 一部のパッケージは、SSR で適切に動作するために追加の構成が必要な場合があります。

以上がNuxt アプリケーションで `navigator`、`window`、および `document` が定義されていないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。