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

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

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

このチュートリアルの動作環境: 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 サーバーランタイム環境が必要です。

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

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