You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

デプロイターゲット

静的ホスティング

Nuxt は静的サイトジェネレータとしても機能します。Nuxt アプリケーションを静的にレンダリングし、サーバーなしでユニバーサルアプリケーションのいいところが全て使えます。nuxt generate コマンドはウェブサイトの静的バージョンを生成します。ルートごとに HTML を生成し、それを dist/ ディレクトリ内に配置します。これによりパフォーマンスと SEO が向上し、オフラインサポートが向上します。

Nuxt Crawler のおかげで動的なルートも生成されます。

For static sites the target of static needs to be added to your nuxt.config file.

nuxt.config.js
export default {
  target: 'static' // デフォルトは 'server'
}

target を static にした状態で nuxt dev を実行すると、開発者の体験は向上するでしょう:

  • context から req と res を削除します
  • クライアントサイドレンダリングの 404、エラー、リダイレクトをフォールバックします SPA フォールバックを参照
  • サーバーサイドレンダリングでは常に $route.query と {} は等しくなります
  • process.static は true になります
また、モジュールの製作者がユーザーターゲットに応じてロジックを追加するために process.target を公開しています。

サーバーホスティング

サーバーホスティングとは、Node.js サーバー上で Nuxt を動かすことです。ユーザーがあなたのページを開くと、ユーザーのブラウザはサーバーからそのページをリクエストします。Nuxt はそのリクエストを処理し、ページをレンダリングして、結果のページをすべてのコンテンツとともに送り返します。

生成時にあらかじめHTMLをレンダリングするのではなく、リクエストごとにレンダリングしたい場合や、serverMiddleware が必要な場合は、サーバーホスティングが必要かもしれません。

ssr: false を指定してサーバーホスティングで Nuxt を実行することはできますが、Nuxt は各ページの HTML を完全にはレンダリングしません。サーバーミドルウェアは必要だが、サーバーサイドで完全にレンダリングされた HTML は必要ないという場合に、このオプションを選択することができます。

サーバーホスティングの場合は、デフォルトである target: 'server' が使用されます。アプリケーションをビルドするには、build コマンドを使用します。

nuxt.config.js
export default {
  target: 'server'
}