Nuxt 2.14 ユニバーサル モードでの target: 'static' と target: 'server' の実際の違いは何ですか? 質問する

アップデート：

による最新のドキュメント、mode: 'universal'および は廃止され、および がmode: 'spa'推奨されるようになりました。ssr: truessr: false

target: 'static'完全な静的 は、 およびssr: true(非推奨の に対応するmode: 'universal')でのみ機能します。 はssr: trueデフォルト値です。 はssr: false非推奨の に対応するものでありmode: 'spa'、 では使用できませんtarget: 'static'。

元の回答:

目標

target不動産を次のように考えると役に立つかもしれない。ホスティング環境target: 'server'- サーバーが必要かどうか、またはCDNによって提供される静的ファイルでシナリオに十分かどうか。アプリがサーバー側でレンダリングされるわけではない（mode下記をご覧ください）。

ターゲットを運用環境で使用する場合static、静的ファイルを提供する CDN だけが必要です。これらの静的ファイルはビルド時に準備され、「最終版」となります (コンテンツまたはコードが更新された次のビルドまで)。このシナリオでは、サーバーは必要ありません (CI パイプラインに含まれる可能性のある CDN とビルド サーバーを除く)。

ターゲットとモード

一方、serverターゲットを使用する場合、本番アプリには、クライアントのリクエストに対する応答が構成され送信されるサーバー環境が必要になります。つまり、更新されたコンテンツでは、アプリを再構築する必要はありません。このコンテンツは、サーバーが要求された後に構成されます。これは、 -モードuniversalとspaモードの両方に適用されます。 モードではuniversal、アプリはサーバー側でレンダリングされます。これに対して、 モードでは、サーバーspa側でのレンダリングはなく (クライアント側でのナビゲーションのみ)、アプリ全体がシングル ページ アプリケーションとして実行されます。

サーバーと静的ターゲット

初心者にとって、サーバー側レンダリングを使用するか静的レンダリングを使用するかを決めるのは少し難しいかもしれません。決定を下すのに役立つ良い質問は、さまざまなユーザー/状況に対して、各ページ/ドキュメント/コンテンツ項目に異なるコンテンツを提供する必要があるかどうかです。必要な場合は、おそらくターゲット を使用しserver、そうでない場合は を使用しますstatic。

これらのアプローチにはそれぞれ、サーバー要件、セキュリティ、速度、CI パイプライン/ビルド プロセス、SEO、価格などの長所と短所があります。適切な選択はユースケースによって異なります。

おっしゃるとおり、バージョンからは2.132 つのデプロイメント ターゲットが利用可能です。それらはserverとですstatic。ソース

従来のアプローチには、主にクライアントがナビゲーション用のAPIasyncDataとfetch関数をリクエストする際に問題や困難がありました。その結果、生成されたサイトはまったく静的ではありませんでした。従来のアプローチの欠点はすべて説明されています。ここ。

新しいターゲット (および同時にstatic必須モード) アプローチでは、コマンドはすべての HTML ページを事前レンダリングし、非同期データ要求をモックします。これは古いもので、今回はクライアントから API を要求しません。これはビルド時にすでに実行されています。universalnuxt generateasyncDatafetchソース

ルートについて。上記のルートはおそらく nuxt のクローラーによって自動的に検出されないため、generate.routesプロパティを使用して手動で生成する必要があります。

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://my-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}