vue.js サーバーサイド レンダリングとは何ですか?

vue.js サーバーサイド レンダリングは、ブラウザーに Vue コンポーネントを出力して DOM を生成および操作しますが、同じコンポーネントをサーバーサイド HTML 文字列にレンダリングしてブラウザーに直接送信することもできます。最後に、これらの静的タグをクライアント上の完全にインタラクティブなアプリケーションに「アクティブ化」します。

このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

サーバーサイド レンダリング (SSR) とは何ですか?

Vue.js は、クライアント側アプリケーションを構築するためのフレームワークです。デフォルトでは、Vue コンポーネントをブラウザに出力して DOM を生成し、DOM を操作できます。ただし、同じコンポーネントをサーバー側で HTML 文字列としてレンダリングし、ブラウザに直接送信し、最終的にこれらの静的タグをクライアント上で完全に対話型のアプリケーションに「アクティブ化」することもできます。

サーバー レンダリングされた Vue.js アプリケーションは、アプリケーションのコードのほとんどがサーバーとクライアントの両方で実行できるという点で、「同型」または「ユニバーサル」であるとみなされる場合もあります。

サーバーサイド レンダリング (SSR) を使用する理由

従来の SPA (シングル ページ アプリケーション) と比較した場合、サーバーサイド レンダリング (SSR) の主な利点は次のとおりです。

• 検索よりも優れた SEOエンジン クローラーは、完全にレンダリングされたページを直接表示できます。

• 現時点では、Google と Bing は同期 JavaScript アプリケーションを問題なくインデックス化していることに注意してください。ここで重要なのは同期です。アプリケーションが最初に読み込み中の菊を表示し、その後 Ajax 経由でコンテンツを取得する場合、クローラーはページ コンテンツをクロールする前に非同期の完了を待機しません。ただし、SEO がサイトにとって重要であり、ページがコンテンツを非同期で取得する場合は、この問題を解決するためにサーバー側レンダリング (SSR) が必要になる場合があります。

• 特にネットワークが遅い状況やデバイスが遅い場合に、コンテンツを取得するまでの時間が短縮されます。サーバーでレンダリングされたマークアップを表示する前に、すべての JavaScript のダウンロードと実行が完了するのを待つ必要がないため、ユーザーは完全にレンダリングされたページをより速く表示できるようになります。一般に、これはユーザー エクスペリエンスの向上につながり、コンテンツを取得するまでの時間がコンバージョン率に直接関係するアプリケーションにとっては重要です。

サーバーサイド レンダリング (SSR) を使用する場合は、次のようなトレードオフがあります。

• 開発条件が制限される。ブラウザ固有のコードは、特定のライフサイクル フックでのみ使用できます。一部の外部ライブラリは、サーバーでレンダリングされたアプリケーションで実行するために特別な処理が必要な場合があります。

• #ビルドのセットアップとデプロイメントに関するその他の要件。任意の静的ファイル サーバーにデプロイできる完全に静的なシングル ページ アプリケーション (SPA) とは異なり、サーバーでレンダリングされるアプリケーションには Node.js サーバー ランタイム環境が必要です。

#サーバー側の負荷が増加します。 Node.js で完全なアプリケーションをレンダリングすると、静的ファイルを提供するだけのサーバーよりも明らかに多くの CPU リソース (CPU 集中型) が消費されるため、高トラフィック環境 (高トラフィック) で使用することが予想される場合は、サーバー負荷を準備してください。それに応じて、キャッシュ戦略を賢明に採用してください。
アプリケーションでサーバーサイド レンダリング (SSR) を使用する前に考えるべき最初の質問は、それが本当に必要かどうかです。これは主に、コンテンツを取得するまでの時間がアプリケーションにとってどれだけ重要であるかによって決まります。たとえば、内部ダッシュボードを構築している場合、初期読み込みに数百ミリ秒の余分な時間がかかっても問題はなく、サーバーサイド レンダリング (SSR) を使用するのは簡単です。ただし、コンテンツを表示するまでの時間要件は非常に重要な指標であり、この場合、サーバーサイド レンダリング (SSR) は最適な初期読み込みパフォーマンスを達成するのに役立ちます。

サーバー サイド レンダリングとプリレンダリング (SSR とプリレンダリング)

サーバー サイド レンダリング (SSR) を調査すると、いくつかのマーケティング ページ (/ など) を改善するためにのみ使用されていることがわかります。 、/about、/contact など)、事前レンダリングが必要になる場合があります。 Web サーバーを使用して HTML をリアルタイムで動的にコンパイルする代わりに、プリレンダリングはビルド時に特定のルートの静的 HTML ファイルを生成するだけです。利点は、プリレンダリングの設定がより簡単で、フロントエンドを完全な静的サイトとして扱えることです。

関連する無料学習の推奨事項:

JavaScript(ビデオ)

以上がvue.js サーバーサイド レンダリングとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。