Vueを学ぶ

第13章. Vueによるサーバ側レンダリング

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、Vueアプリケーションの完全なCI/CDパイプラインをセットアップする方法を学んだ。また、Netlifyを使ってアプリケーションを本番用にデプロイする方法も学んだ。我々のアプリケーションは、ユーザがウェブ経由でアクセスできるようになった。これで、Vueを学ぶ旅はほぼ終わった。この章では、Vueを使用するもう一つの側面である、Nuxt.js を使用したサーバ側レンダリングと静的サイト生成を探求する。

Vueのクライアントサイド・レンダリング

デフォルトでは、Vueアプリケーションはクライアントサイドレンダリング用で、プレースホルダindex.html ファイル、JavaScriptファイル（通常はパフォーマンス最適化のためにViteによってチャンクにコンパイルされる）、CSS、アイコン、画像などの他のファイルによって、完全なUIエクスペリエンスが実現される。初期化ロードでは、ブラウザはサーバにindex.html ファイルを要求する。その代わり、サーバはオリジナルのプレースホルダ・ファイル（多くの場合、Vueエンジンがアプリ・インスタンスをマウントするための一意のidセレクタapp を持つ単一の要素）と、メイン・コードを含む必要なJavaScriptファイルを指すscript タグを配信する。ブラウザがHTMLファイルを受信すると、解析が開始され、目的のmain.js ファイルなどの追加リソースが要求され、それを実行して残りのコンテンツが適宜レンダリングされる（図13-1）。

図13-1. クライアント側Vueアプリケーションのレンダリングの流れ

この時点でアプリケーションの初期化が完了し、ユーザはアプリケーションとの対話を開始できる。Vueは、組み込みのルーティング・システムを使って、ユーザによるビュー変更のリクエストを動的に処理する。しかし、ページを右クリックしてView page sourceを選択すると、元のルートファイル（index.html ）のコードだけが表示され、現在のUIビューは表示されない。この振る舞いは、特に優れた検索エンジン最適化（SEO）を必要とするWebサイトやアプリを構築する場合、問題となる可能性がある。¹(SEO)を必要とするウェブサイトやアプリを構築する場合は特に、この動作が問題になることがある。

さらに、コンテンツをユーザーに表示する前にJavaScriptコードをロードして実行するプロセスでは、ダウンロードするJavaScriptファイルが重い、ネットワークが遅い、ブラウザがコンテンツをペイントするのにかかる時間（First Paint）などの要因により、ユーザーの待ち時間が長くなる可能性がある。その結果、プロセス全体がTime To Interactive（TTI）やFirst Paint（ファースト・ペイント）の遅さにつながる可能性がある。²(TTI）やファースト・コンテンツ・ペイント³(FCP）につながる。これらの要因はすべて、アプリ全体のパフォーマンスとユーザ体験に影響し、多くの場合、修正が困難である 。 ...