Nuxt.js の動作: Vue.js サーバー側レンダリング フレームワーク

Nuxt.js プロジェクトを作成する

まず、Node.js と、yarn または npm がインストールされていることを確認してください。次に、コマンドラインを使用して新しい Nuxt.js プロジェクトを作成します。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

作成プロセス中に、UI フレームワーク、プリプロセッサなどのオプションが必要かどうかを選択し、必要に応じて構成できます。

ディレクトリ構造

Nuxt.js は特定のディレクトリ構造に従います。主要なディレクトリの一部は次のとおりです。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

• .nu​​xt/: このディレクトリは自動的に生成され、コンパイルされたコードが含まれます。通常、直接変更する必要はありません。
• assets/: CSS、JavaScript、画像などのコンパイルされていない静的リソースを保存します。 Nuxt.js はビルド中にこれらのリソースを処理します。
• コンポーネント/: アプリケーションのさまざまな部分で再利用できるカスタム Vue コンポーネントを保存します。
• layouts/: ページのレイアウトを定義します。デフォルトのレイアウトまたは複数の特定のレイアウトが存在する可能性があります。
• Pages/: 各ファイルはルートに対応し、ファイル名がルート名になります。動的ルートは角括弧 [] で表されます。
• middleware/: ページのレンダリングの前後にロジックを実行できるカスタム ミドルウェアを配置します。
• plugins/: Vue.js プラグインのカスタム エントリ ファイル。
• static/: 何も処理せずにビルド出力ディレクトリに直接コピーされ、robots.txt や favicon.ico などの保存によく使用されます。
• store/: Vuex 状態管理ディレクトリ。ストア全体のアクション、ミューテーション、ゲッター、エントリー ファイルを保存します。
• nuxt.config.js: Nuxt.js 構成ファイル。プロジェクト設定のカスタマイズに使用されます。
• package.json: プロジェクトの依存関係とスクリプト構成。
• yarn.lock または npm.lock: プロジェクトの依存関係の正確なバージョンを記録して、さまざまな環境での依存関係の一貫性を確保します。

ページのレンダリング

pages/ ディレクトリにindex.vue ファイルを作成します。これはアプリケーションのホームページです:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Nuxt.js ページ レンダリングのプロセスは、サーバー側レンダリング (SSR) とクライアント側レンダリング (CSR) の 2 つの主要な段階に分かれています。 Nuxt.js ページ レンダリングの詳細な手順は次のとおりです。

初期化:

ユーザーはブラウザに URL を入力し、サーバーにリクエストを送信します。

サーバーはリクエストを受信した後、処理を開始します。

ルート解決:

Nuxt.js は、nuxt.config.js のルート設定 (存在する場合) を使用するか、pages/ ディレクトリからルートを自動的に生成します。

pages/index.vue や pages/about.vue など、対応するページ ファイルが識別されます。

データのプリフェッチ:

Nuxt.js は、ページ コンポーネントで asyncData または fetch メソッドを探します (存在する場合)。

これらのメソッドはサーバー側で実行され、API または他のデータ ソースからデータを取得します。

データが取得されると、シリアル化されてページ テンプレートに挿入されます。

テンプレートのレンダリング:

Nuxt.js は、Vue.js のレンダリング エンジンを使用して、コンポーネントとプリフェッチされたデータを HTML 文字列に変換します。
HTML 文字列には、クライアントが必要とするすべての初期データが含まれており、<script> 内にインライン化されています。 JSON 形式のタグ。</script>

HTML を返す:

サーバーは、生成された HTML 応答をクライアント (ブラウザ) に送り返します。

クライアントの初期化:

ブラウザは HTML を受信すると、インライン JavaScript の解析と実行を開始します。
Nuxt.js クライアント ライブラリ (nuxt.js) がロードされ、初期化されます。

クライアントレンダリング:

クライアント ライブラリがレンダリングを引き継ぎ、Vue.js インスタンスが作成され、データがインライン JSON から Vue インスタンスに挿入されます。
ページの初期レンダリングが完了し、ユーザーはページの完全なコンテンツを確認できるようになります。
この時点で、ページはインタラクティブになり、ユーザーはイベントをトリガーして移動できます。

その後のナビゲーション:

ユーザーが他のページに移動すると、Nuxt.js は非更新ジャンプにクライアント側ルーティング (Vue Router) を使用します。
新しいページにデータが必要な場合、asyncData または fetch メソッドがクライアント上で実行され、新しいデータがフェッチされ、ビューが更新されます。

SSG (静的サイト生成):

開発外では、nuxt generated コマンドを使用して静的 HTML ファイルを生成できます。

各ページは、必要なデータとリソースがすべて含まれた個別の HTML ファイルとして事前にレンダリングされます。

asyncData の使用

asyncData メソッドは Nuxt.js に固​​有であり、サーバー上でデータをプリフェッチし、クライアント上でそれを再利用できます。上の例では、単に message の値を変更しましたが、実際のアプリケーションでは、ここで API を呼び出してデータを取得する場合があります。

ミドルウェア

ミドルウェア(Middleware)とは、経路変更の前後に特定のロジックを実行できる機能です。ミドルウェアは、認証、データのプリロード、ルート ガードなどのタスクを処理するために、グローバル、ページ レベル、またはレイアウト レベルで使用できます。

1. グローバルミドルウェア

グローバルミドルウェアはnuxt.config.jsファイルで構成され、アプリケーション内のすべてのページに影響します:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

ミドルウェア ファイルは通常、middleware/globalMiddleware1.js などのミドルウェア/ディレクトリにあります。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

2. ページレベルのミドルウェア

ページレベルのミドルウェアは特定のページにのみ影響します。ページコンポーネントでミドルウェアを宣言します:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

対応するミドルウェア ファイルは、middleware/ディレクトリ (例: middleware/pageMiddleware.js) にあります。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3. レイアウトレベルのミドルウェア

レイアウト レベルのミドルウェアはページ レベルと似ていますが、レイアウトを使用するすべてのページに適用されます。レイアウトコンポーネントでミドルウェアを宣言します:

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

対応するミドルウェア ファイルは、ミドルウェア/ディレクトリにあります:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

ミドルウェアのコンテキスト

ミドルウェア関数は、次のプロパティを含むコンテキスト オブジェクトをパラメーターとして受け取ります。

• req (HTTP リクエスト オブジェクト、サーバー側でのみ有効)

• res (HTTP 応答オブジェクト、サーバー側でのみ有効)

• redirect (リダイレクトに使用する関数)

• アプリ (Vue インスタンス)

• route (現在のルート情報)

• ストア (有効な場合は Vuex ストア)

• ペイロード (asyncData によって返されたデータがある場合)

ミドルウェアは順番に実行でき、各ミドルウェアはチェーン内の次のミドルウェアの実行を継続するか、リダイレクト機能を通じてルートを中断するかを決定できます。

動的ルーティング

Nuxt.js は動的ルーティングをサポートしています。これは、ブログ投稿やユーザー プロフィールなどの動的 ID を持つコンテンツを処理するのに非常に便利です。pages/ ディレクトリに [id].vue などの動的ルーティング ファイルを作成します。

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

ここで [id] は動的パラメータを表し、asyncData はこのパラメータを自動的に処理し、対応する ID を持つブログ投稿を取得します。

レイアウト
レイアウトを使用すると、グローバル ページまたは特定のページの共通構造を定義できます。レイアウト/ディレクトリにdefault.vueファイルを作成します:

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

デフォルトでは、すべてのページでこのレイアウトが使用されます。特定のページに別のレイアウトを設定したい場合は、ページ コンポーネントで指定できます:

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

プラグインとライブラリの統合
Nuxt.js は Vue.js プラグインをサポートしており、nuxt.config.js:
で設定できます。

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

次に、vuetify.js などの対応するファイルを plugins/ ディレクトリに作成します。

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

構成と最適化

Nuxt.js 設定ファイル (nuxt.config.js)

nuxt.config.js は、Nuxt アプリケーションのメイン構成ファイルであり、アプリケーションの動作をカスタマイズするために使用されます。一般的に使用される構成項目をいくつか示します:

• mode: アプリケーションの実行モードを設定します。オプションの値は、「spa」 (シングルページ アプリケーション)、「universal」 (サーバー側レンダリング)、および「static」 (静的生成) です。デフォルトは「ユニバーサル」です。
• head: タイトル、メタデータ、リンクなど、ページの一部を構成します。
• css: グローバル CSS ファイルを指定します。ファイル パスの配列を指定できます。
• build: transpile、extractCSS、extend などのビルド プロセスを構成します。たとえば、ここで Babel プラグインを追加したり、Webpack 構成を調整したりできます。
• ルーター: ベースパス、モードなどのルーティング構成をカスタマイズします。
• axios: ベース URL、プロキシ設定などを含む axios モジュールを構成します。
• plugins: グローバル Vue プラグインを登録します。クライアントまたはサーバーにロードされるように指定できます。
• モジュール: @nuxtjs/axios、@nuxtjs/proxy などの外部モジュールをロードします。
• env: ビルド時にクライアントとサーバーに挿入される環境変数を定義します。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

最適化戦略

• 非同期データのプリフェッチ (asyncData/fetch): asyncData または fetch メソッドを使用してサーバー側でデータをプリフェッチし、クライアント レンダリングの負担を軽減します。
• コード分割: Nuxt.js はコードを自動的に分割し、ルートが訪問されたときにのみ関連するコードが読み込まれるようにします。
• 静的サイト生成 (SSG): nuxtgenerate コマンドを使用して静的 HTML ファイルを生成します。これは、コンテンツの変更が頻繁ではないサイトに適しており、読み込み速度と SEO フレンドリー性が向上します。
• キャッシュ戦略: ETag や Last-Modified などの HTTP キャッシュ戦略を使用して、重複リクエストを減らします。
• Vue.js の最適化: 無用なウォッチャーの回避、v-once の使用による再レンダリングの削減など、Vue コンポーネントの最適化を確実に行います。
• 画像の最適化: 正しい画像形式 (WebP など) を使用し、画像サイズが適切であることを確認し、遅延読み込みテクノロジーを使用します。
• Service Worker: PWA サポートを統合し、オフライン キャッシュとプッシュ通知に Service Worker を使用します。
• ツリー シェイキング: 未使用のコードを削除するために、依存関係がツリー シェイキングをサポートしていることを確認してください。
• 分析とモニタリング: nuxt build --analyze を使用するか、パフォーマンス分析用のサードパーティ ツール (Google Lighthouse など) を統合して、アプリケーションのパフォーマンスを継続的に監視します。

静的サイト生成 (SSG)

Nuxt.js の静的サイト生成 (SSG) は、nuxt generated コマンドを通じて実装されます。このコマンドは、アプリケーションのルートを走査し、ルートごとに事前レンダリングされた HTML ファイルを生成します。このファイルは、静的ファイル ホスティング サービスに直接デプロイできます。 SSG に関する重要なポイントをいくつか示します:

1.構成: nuxt.config.js ファイルで、静的生成の動作を制御する生成オプションを構成できます:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2. Generate: npm rungenerate または Yarn Generate を実行して、静的生成プロセスを開始します。 Nuxt.js は、generate.routes の設定に従って、対応する HTML ファイルを生成します。明示的に定義されていない場合は、pages/ ディレクトリ内のすべてのファイルを自動的にスキャンしてルートを生成します。

3.データのプリフェッチ: ページ コンポーネントでは、asyncData または fetch メソッドを使用してデータをプリフェッチできます。このデータは、静的ページの生成時に HTML に挿入されるため、クライアントの読み込み時にページに追加のリクエストが必要なくなります。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

4.ミドルウェア処理: SSG はサーバー環境なしで静的ファイルを生成するため、SSG プロセス中にサーバー側のミドルウェアは実行されません。したがって、生成時にロジックを実行する必要がある場合は、asyncData または fetch で処理するのが最善です。

5.デプロイ: 生成された静的ファイルは、Netlify、Vercel、GitHub Pages、AWS S3 などの静的ファイル ホスティング サービスにデプロイできます。これらのサービスは通常、サーバー側のコードを実行する必要はなく、生成された dist フォルダーをアップロードするだけです。

6. SEO の最適化: SSG は、検索エンジン クローラーが JavaScript の実行を待たずに、事前にレンダリングされた HTML コンテンツを読み取ることができるため、SEO を向上させます。

7.動的ルート: 動的ルートの場合、Nuxt.js は可能なすべての組み合わせを生成しようとします。考えられるすべての動的ルートを予測できない場合は、generate.routes で手動で指定するか、generate.includePaths およびgenerate.excludePaths を使用して制御できます。

8. 404 ページ:generate.fallback を true に設定すると、事前レンダリングされない動的ルートの 404 ページが生成されます。ユーザーがこれらのルートにアクセスすると、Nuxt.js はクライアント側でルートをレンダリングしようとします。

nuxtgenerate コマンドを実行すると、Nuxt.js が静的 HTML ファイルを生成します。

検証とエラー処理

検証

検証には通常、フォーム データまたは API リクエストの入力検証が含まれます。 Nuxt.js 自体は検証ライブラリを直接提供しませんが、Vuelidate、vee-validate などのサードパーティ ライブラリを統合したり、型チェックに TypeScript を使用したりできます。

Vee-Validate の使用
1.インストール: まず、vee-validate ライブラリをインストールする必要があります:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2.構成: nuxt.config.js:
に Vue プラグイン構成を追加します。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3.プラグインを作成します: plugins/vee-validate.js:
で Vee-Validate を構成します

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

4.使用法: コンポーネントでのフォーム検証に Vee-Validate を使用します:

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

エラー処理

Nuxt.js は、グローバル エラー処理やページ固有のエラー処理など、エラーを処理するいくつかの方法を提供します。

グローバルエラー処理

• カスタム エラー ページ: エラー ページのレイアウトをカスタマイズするには、layouts ディレクトリに error.vue ファイルを作成します。
• グローバル エラーをキャプチャする: グローバル エラーをキャプチャするように nuxt.config.js の error プロパティを構成します。

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

ページ固有のエラー処理

ページ コンポーネントでは、asyncData または fetch メソッドの try-catch 構造を使用してエラーを処理できます。

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

API リクエストのエラー処理

API リクエストの場合、@nuxtjs/axios モジュールを使用すると、リクエスト インターセプターでエラーを均一に処理できます。

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

このプラグインを必ず nuxt.config.js に登録してください。

Vue エコシステムの統合

Vueルーター:

Nuxt.js は、ファイル構造に基づいてアプリケーションのルーティング システムを自動的に生成します。通常、ルーティング構成は手動で記述する必要はありませんが、nuxt.config.js のルーター プロパティを通じて拡張できます。

ビュークス:

Nuxt.js は Vuex ストアを自動的に作成します。ストア ディレクトリの下に、モジュール状態、ミューテーション、アクション、およびゲッターを作成できます。たとえば、ユーザー データを管理するために、store/modules/users.js ファイルを作成します。

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Vue CLI:

Nuxt.js は独自のビルド ツールを提供しますが、これも Vue CLI に基づいています。これは、npx nuxt generated (静的生成) や npx nuxt build (アプリケーションのビルド) など、Vue CLI に似たコマンドライン ツールを使用できることを意味します。

バベル:

Nuxt.js は、最新の JavaScript 機能をサポートするためにデフォルトで Babel で構成されています。通常、特別な必要がない限り、Babel を手動で構成する必要はありません。

タイプスクリプト:

TypeScript を使用するには、nuxt.config.js で typescript: true を設定すると、Nuxt.js が TypeScript サポートを自動的に構成します。

ESLint:

コードの品質をチェックするには、プロジェクトに ESLint をインストールし、.eslintrc.js を構成します。 Nuxt.js は、統合を簡素化する @nuxt/eslint-module プラグインを提供します。

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

Vueの使用:

VueUse は、さまざまな実用的な機能を含む Vue ユースケース ライブラリです。統合するには、まず @vueuse/core をインストールし、次にコンポーネントに関数をインポートして使用します。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

Vue プラグイン:

nuxt.config.js のプラグイン構成項目を使用して、Vue プラグインをグローバルに登録できます。たとえば、Vue Toastify を統合して通知を表示します。

<!-- pages/index.vue -->
<template>
  <div>
    <h1 id="Hello-from-Nuxt-js-SSR">Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

Nuxt.jsを使用したワークフロー

Nuxt.js は、開発、構築、デプロイのための完全なワークフローを提供します。開発サーバーを起動するには nuxt コマンドを使用し、実稼働ビルドには nuxt build を、実稼働サーバーを起動するには nuxt start を、静的ファイルを生成するには nuxt generated を使用します。

パフォーマンスの最適化

1. 静的生成 (SSG): nuxt 生成コマンドを使用して、事前レンダリングされた HTML ファイルを生成します。これにより、最初の画面の読み込み速度が大幅に向上し、SEO に適しています。

2. コード分割: Nuxt.js はデフォルトでコード分割を実行し、アプリケーションを複数の小さなブロックに分割し、現在のページに必要なコードのみをロードして、初期読み込み量を削減します。

3. 遅延ロード: 大規模なアプリケーションの場合は、コンポーネントまたはモジュールの遅延ロードを検討し、必要な場合にのみロードすることができます。 を使用できます。または これを実現するには、非同期コンポーネントと組み合わせます。

4. リソースの最適化:

• 画像: 正しい形式 (WebP など) を使用するか、画像を圧縮するか、遅延読み込み () を使用するか、nuxt- を使用します。 image または nuxt-picture コンポーネント。

• CSS: CSS を別のファイルに抽出し、インライン スタイルを減らします。

• JS: Tree Shaking を使用して未使用のコードを削除します。

1. 非同期データのプリフェッチ: asyncData または fetch メソッドを使用してデータをプリロードし、レンダリング前にデータの準備が整っていることを確認します。

2. サーバー側のキャッシュ: nuxt-ssr-cache モジュールを使用して、サーバー側のレンダリングの結果をキャッシュし、不要な API 呼び出しを減らします。

3. HTTP キャッシュ: 正しいキャッシュ ヘッダー (Cache-Control など) を設定し、ブラウザを使用して静的リソースをキャッシュします。

4. ルート ガード: beforeRouteEnter などのルート ガードを使用して、不要なデータのロードを回避します。

5. HTTP リクエストを減らす: 複数の CSS ファイルと JS ファイルを結合して、HTTP リクエストの数を減らします。

6. API パフォーマンスの最適化: バックエンド インターフェイスを最適化し、応答時間を短縮し、ページング、フィルタリング、キャッシュ戦略を使用します。

7. CDN の活用: CDN 上で静的リソースをホストし、グローバル ユーザーの読み込みを高速化します。

8. Vuex 状態管理の最適化: 不要な計算プロパティとリスナーを回避して、状態変更のオーバーヘッドを削減します。

9. パフォーマンス監査: Lighthouse、Chrome DevTools、またはその他のパフォーマンス監査ツールを使用して、アプリケーションのパフォーマンスを定期的にチェックし、レポートに基づいて改善を行います。

10. Service Worker: 該当する場合は、PWA 機能を統合し、オフライン キャッシュとリソースのプリロードに Service Worker を使用します。

11. モジュールの最適化: 高性能のサードパーティ モジュールを選択し、SSR 用に最適化されていることを確認します。

以上がNuxt.js の動作: Vue.js サーバー側レンダリング フレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。