ホームページ > 記事 > ウェブフロントエンド > Vue3のSSR機能：サーバーサイドレンダリングの実装

Vue3のSSR機能：サーバーサイドレンダリングの実装

WBOYオリジナル: 2023-06-18 11:01:373650ブラウズ

モバイルインターネットの普及とクラウドコンピューティング技術の急速な発展に伴い、フロントエンドフレームワークは徐々に WEB 開発の主力になりました。フロントエンドフレームワークは、便利なページ構造、インタラクティブな効果、動的なコンテンツ表示を提供するだけでなく、迅速な開発、保守性、パフォーマンスの最適化などの利点も備えており、開発効率とユーザーエクスペリエンスが大幅に向上します。人気のフロントエンドフレームワークとして、Vue.js バージョン 3.0 が正式にリリースされ、さらなる革新と最適化がもたらされました。その中でも、Server Side Rendering (SSR) の実装は Vue3 の重要なアップデートです。

1. SSR の定義と利点

SSR は、JavaScript を使用してクライアント側で DOM ツリーを動的に生成するのではなく、サーバー側でページのレンダリング作業を完了することを指します。ページのレンダリングを迅速に改善するための速度と SEO の目的。従来の SPA (シングルページアプリケーション) アーキテクチャでは、通常、クライアント側のレンダリングモードを使用して、クライアント側での Vue.js レンダリングを通じてページを表示します。その利点は、優れた動的な対話性と優れたユーザーエクスペリエンスです。ただし、SPA は JavaScript がダウンロードされて解析された後でしかページを表示できないため、ページの読み込みが遅い、SEO が不親切などの問題が発生します。 SSR は、サーバー側でレンダリングされた HTML ドキュメントをクライアントに送信します。これにより、読み込み速度と SEO が最適化されるだけでなく、初期レンダリングパフォーマンス、アクセシビリティ、およびソーシャル共有が向上するという利点もあります。

2. Vue3

Vue.js での SSR 実装は、いくつかの特別な需要のシナリオに対応するために、バージョン 2.0 でのサーバー側レンダリングをサポートするソリューションを提供します。 Vue3 では、SSR はより完全なサポートを受けており、その中心となるのは createRenderer 関数です。次に、Vue3 での SSR の実装を見てみましょう。

インストール関連の依存関係

Vue3 は公式に 2 つのコア依存関係を提供します: @vue/server-renderer と @vue/compiler-sfc 前者は HTML と @vue/compiler-sfc の生成に使用されます。 CSS. 、スクリプト、その他のリソースを取得し、文字列に変換して返します。後者は、.vue ファイルのコンパイルおよび解析機能を提供し、.vue ファイルをレンダリング関数に変換できます。

レンダリング関数を定義する

Vue3 では、テンプレートテンプレートの代わりにレンダリング関数を使用することをお勧めします。レンダリング関数は、createRenderer 関数を通じて定義できます。 createRenderer 関数は、レンダリング関数とその他の関連情報を含むオブジェクトを返します。

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');

renderer.renderToString(app).then((html) => {
  console.log(html);
}).catch((err) => {
  console.error(err);
});

このうち、app は Vue インスタンスであり、最初に createApp 関数を通じて初期化してから、DOM 要素にマウントする必要があります。次に、レンダリング関数を使用してアプリをレンダリングできます。

ルーターとコンテナのコンポーネントを作成する

さまざまなルートに対応するコンポーネントと状態の管理をサポートするには、SSR で vue-router や vuex などのツールを使用する必要があります。これを行う前に、ルーターとコンテナーのコンポーネントを作成する必要があります。

const { createRouter } = require('vue-router');
const App = require('./App.vue');

const router = createRouter({
  routes: [
    { path: '/', component: App }
  ]
});

SSR を実装するコードを記述する

const express = require('express');
const { createSSRApp } = require('vue');

const server = express();
const template = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3 SSR</title>
    </head>
    <body>
      <!--vue-ssr-outlet-->
    </body>
  </html>
`;

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
  template: template
});

server.use(express.static('dist'));

server.get('*', async (req, res) => {
  const app = createSSRApp(require('./src/App.vue'));
  const router = require('./src/router').default;
  app.use(router);
  const html = await renderer.renderToString(app);
  res.send(html);
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

SSR を実装するコードを記述する場合は、Express プロジェクトを作成し、createSSRApp 関数を使用して Vue インスタンスを作成する必要があります。そして、Router、状態管理、createRenderer 関数などがすべて統合されています。

3. SSR に関する注意事項

SSR を使用してページレンダリングを実装する場合は、次の点に注意する必要があります。静的リソース、データインターフェイス、データベース、キャッシュ、ファイルストレージなどのリソース。同時に、運用とメンテナンスの学生にとっては、より多くの課題ももたらします。

SSR は、レンダリングのために Vue コンポーネントを文字列形式に変換する必要があるため、Vue コンポーネントの変換とコンパイルが必要となり、ある程度の消費量とコンパイル時間がかかります。
つまり、SSR は比較的新しい技術であり、性能や使用上のさまざまな問題への対応に注意が必要ですが、ご自身の状況に応じて技術の選択と実際の使用を行うことができます。ニーズ。特に大規模なリアルタイムシステムでは、SSR のセキュリティ、保守性、パフォーマンスに特別な注意を払う必要があります。

以上がVue3のSSR機能：サーバーサイドレンダリングの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 架构 css vue.js html 前端框架 express 字符串接口 JS 对象 dom 数据库搜索引擎性能优化 SEO

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue3 のdefineAsyncComponent 関数: コンポーネントの非同期ロード次の記事：Vue3 のdefineAsyncComponent 関数: コンポーネントの非同期ロード

続きを見る