Blog

Nuxt.jsの新しいバージョンは、「静的」ターゲットプロパティをもたらします。しかし、Nuxtはすでに静的なJamstackサイトを生成しているのに、なぜそれを明示的に指定したいのでしょうか？

最近世界を支配している2つのJavaScriptフロントエンドフレームワークがあります。個人的には、ReactとVueが「CaptureTheDeveloper'sAttention」ゲームの非公式の勝者だと思います。時間の経過とともに、これら2つのプロジェクトは、静的サイト、サーバー側レンダリング、およびその他の多くの特典を、面倒な構成なしですぐにサポートできる、まったく新しいフレームワークエコシステムの進化に役立ちました。 staticgenによると、Nuxt.jsは最も人気のあるフレームワークの1つであり、現在も成長を続けています。それは主に、探しているものをいつでもすばやく見つけることができる優れたドキュメントによるものだと思います。私が理解するのが難しく、苦労していた唯一のことは、さまざまなターゲット、モード、およびそれぞれのコマンドに対して可能なすべての構成の組み合わせでした。

Nuxtは、アプリケーションを実行するためのいくつかの方法を提供します。従来のシングルページアプリケーション、超高速の静的サイト、またはサーバー側でレンダリングされたアプリを使用できます。最初は、それらを簡単に区別することをお勧めします。

• シングルページアプリケーション（SPA） -これは従来のVueアプリに似ています。 HTMLは、クライアント側で純粋なJavaScriptを使用してレンダリングされます。これは、Nuxtの構成とフレームワークの恩恵を受けて、VueからNuxt.jsへの最初の移行ステップとして適しています。
• サーバーサイドレンダリング（SSR） -これはユニバーサルまたは同形とも呼ばれます。主な違いはレンダリングにあり、これは純粋にNode.jsサーバーで発生します。 SPAと比較した場合、その最大の利点は、はるかに優れたSEOサポートです。
• 静的サイト-トレンディ（Jamstack）、高速、安価、安全、そしてパフォーマンス。すべてのHTMLページはビルド時に事前にレンダリングされ、CDNから提供されます。もちろん、すべてのユースケースに対応できるわけではなく、一部のプロジェクトには適していません。

最初の調査の後、どのレンダリングがプロジェクトに適しているかを明確にした後、Nuxt.jsアプリのメインnuxt.config.jsアプリの動作を指定する3つの主要な構成プロパティがあります： target 、 mode 、およびssr 。

目標

serverまたはstatic 2つのオプションがあります。ターゲットプロパティをホスティング環境として考えると役立つ場合があります—必要かどうかにかかわらず：

• サーバー、または
• 静的ファイルを提供するためのCDNのみ。

target: 'server'

それがターゲットと呼ばれているという事実にもかかわらずtarget: 'server'と古いドキュメントはサーバー側レンダリング用であると述べていますが、それは文字通りあなたのアプリがサーバー側レンダリングされていることを意味しません。これは私にとって本当に難読化されました。この目的のために、Nuxt.jsには追加のmodeまたはssrプロパティがありますが、それについては説明します。

target: 'server'を使用する場合、本番アプリには、クライアントの要求に対する応答が作成されて送信されるサーバー環境が必要です。

target: 'static'

target: 'static'を使用する場合は、静的ファイルを提供するCDNが必要です。これらの静的ファイルはビルド時に準備され、最終的なものです（更新されたコンテンツまたはコードを含む次のビルドまで）。このシナリオでは、サーバーは必要ありません（CDNとビルドサーバー以外は、おそらくCIパイプラインにあります）。

このオプションは、バージョン2.14.0から使用できます。 asyncDataを介してAPIを要求し、ナビゲーション用の関数をfetchするという、古いアプローチにはいくつかの問題と問題がありました。その結果、生成されたサイトは完全に静的ではありませんでした。古いアプローチのすべての欠点は、公式ドキュメントに記載されています。

新しいtarget: 'static' （および必須のssr: 'true' ）アプローチでは、 nuxt generateコマンドはすべてのHTMLページを事前レンダリングし、非同期データ要求をモックします。その古いasyncDataとfetchは、今回はクライアントにAPIを要求していません。これは、ビルド時にすでに実行されていました。

サーバーまたは静的な選択？

初心者がサーバーサイドレンダリングを使用するか静的レンダリングを使用するかを決定するのは少し難しいかもしれません。決定を下すのに役立つかもしれない良い質問は次のとおりです。異なるユーザー/状況のページ/ドキュメント/コンテンツアイテムごとに異なるコンテンツを提供する必要がありますか？もしそうなら、あなたはおそらくserverターゲットを使うべきです、さもなければstaticです。

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

モードとssr

modeプロパティに使用できる値が2つあることをご存知でしょう。mode mode: 'universal'とmode: 'spa'です。最新のドキュメントによるssr: 'true'およびssr: 'false'を優先して非推奨になりました。

mode: 'universal'

このオプションは非推奨になりました。代わりにssr: 'true'を使用する必要があります。

mode: 'spa'

このオプションは非推奨になりました。代わりにssr: 'false'を使用する必要があります。

ssr: 'true'

このオプションを使用すると、アプリはサーバー側でレンダリングされます。これがデフォルト値です。

ssr: 'false'

ssr: 'false'オプションを使用すると、サーバー側のレンダリングは行われず（クライアント側のナビゲーションのみ）、アプリ全体が単一ページアプリケーションとして実行されます。 target: 'static'オプションと組み合わせて使用することはできません。

TL; DR：使用可能なコマンドとレンダリング

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

また、Nuxt.jsですぐに使用できるコマンドがいくつかあります。それらの一部は、一部のデプロイメントターゲットでのみ使用できます。さらに、以下の表は、それぞれの結果アプリケーションでtarget 、 mode 、およびssr