ホームページ > 記事 > ウェブフロントエンド > vue3.0 はサーバーサイドレンダリングをサポートしていますか?

vue3.0 はサーバーサイドレンダリングをサポートしていますか?

青灯夜游オリジナル: 2022-12-15 14:47:242406ブラウズ

vue3.0 はサーバー側レンダリングをサポートします。 Vue は、サーバー側でコンポーネントを HTML 文字列に直接レンダリングし、サーバー側の応答としてブラウザーに返し、最後にブラウザー側で静的 HTML をインタラクティブなクライアントアプリケーションに「アクティブ化」(ハイドレート) することをサポートしています。サーバー側でレンダリングされた Vue アプリケーションは、アプリケーションのコードのほとんどがサーバーとクライアントの両方で実行されるため、「同型」または「ユニバーサル」であると考えることができます。サーバー側レンダリングを使用した Vue の利点: 最初の画面の読み込みが速く、統合されたメンタルモデルが優れていますSEO.

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue はサーバーをサポートしています。サイドレンダリング (SSR)。

Vue.js は、クライアント側アプリケーションを構築するためのフレームワークです。デフォルトでは、Vue コンポーネントの役割は、ブラウザーでの生成と DOM の操作です。 Vue はまた、サーバー側でコンポーネントを HTML 文字列に直接レンダリングし、サーバー側の応答としてブラウザーに返し、最後に対話できるクライアントのためにブラウザー側で静的 HTML を「アクティブ化」(ハイドレート) することもサポートしています。

#アプリケーションのコードのほとんどはサーバーとクライアントで同時に実行されるため、サーバーによってレンダリングされる Vue.js アプリケーションは、「同型」 (Isomorphic) または「ユニバーサル」 (Universal) と見なすこともできます。

サーバーサイドレンダリング (SSR) を使用する理由?クライアントサイドのシングルページアプリケーション (SPA) との比較 SSR と比較した場合の主な利点は、次のとおりです。 SSR は:

最初の画面の読み込みの高速化
: これは、ネットワーク速度が遅い場合や、動作が遅いデバイスでは特に重要です。サーバー側でレンダリングされる HTML は、すべての JavaScript がダウンロードされて実行されるまで待ってから表示されるため、完全にレンダリングされたページがユーザーに早く表示されます。さらに、データ取得プロセスは最初の訪問時にサーバー側で完了します。フェッチよりもデータベース接続の方が高速な場合があります。これは通常、コア Web メトリクススコアの向上、ユーザーエクスペリエンスの向上につながり、「最初の画面の読み込み速度はコンバージョン率に直接関係する」アプリケーションにとって、これは非常に重要になる可能性があります。[関連する推奨事項: vuejs ビデオ]チュートリアル、Web フロントエンド開発]
統合メンタルモデル
: 同じ言語を使用してアプリケーション全体を開発でき、バックエンドテンプレートシステムとフロントエンドフレームワークの間を行ったり来たりする必要がなく、同じ宣言型のコンポーネント指向のメンタルモデルを使用できます。
: 検索エンジンのクローラーは、完全にレンダリングされたページを直接見ることができます。
#SSR を使用する場合は、いくつかのトレードオフがあります。開発中です。ブラウザ側の特定のコードは、特定のライフサイクルフックでのみ使用できます。一部の外部ライブラリは、サーバー側で使用する特別な処理を必要とする場合があります。レンダリングされたアプリケーション内で実行します。

ビルド構成とデプロイメントに関連するその他の要件。サーバーサイドレンダリングアプリケーションには、任意の静的ファイルサーバーにデプロイできる完全な静的 SPA とは異なり、Node.js サーバーを実行できる環境が必要です。

サーバー負荷が高くなります。 Node.js で完全なアプリをレンダリングすることは、単に静的ファイルをホストする場合よりも CPU を集中的に使用するため、高トラフィックが予想される場合は、対応するサーバー負荷に備え、賢明なキャッシュ戦略を採用してください。

静的サイトの生成

(静的サイト生成、SSG と略称) は、プリレンダリングとも呼ばれ、高速 Web サイトを構築するためのもう 1 つの一般的なテクノロジです。ページのサーバー側のレンダリングに必要なデータがすべてのユーザーで同じである場合、リクエストが届くたびにページを再レンダリングするのではなく、一度だけレンダリングし、構築プロセス中に事前に実行することができます。事前レンダリングされたページが生成され、静的 HTML ファイルとしてサーバー上でホストされます。 SSG は SSR アプリケーションと同じパフォーマンスを維持し、優れた最初の画面の読み込みパフォーマンスを実現します。同時に、静的な HTML とリソースファイルを出力するため、SSR アプリケーションよりも安価で導入が簡単です。ここでのキーワードは静的です。SSG は静的データを使用するページにのみ使用できます。つまり、データはビルド時に認識され、複数のデプロイメントにわたって変更されません。データが変更されるたびに、再デプロイする必要があります。

いくつかのマーケティングページ (/、/about、/contact など) の SEO を最適化するためだけに SSR を調査している場合は、SSR の代わりに SSG が必要になる可能性があります。 SSG は、ドキュメントサイトやブログなどのコンテンツベースの Web サイトの構築にも最適です。実際、あなたが今読んでいる Web サイトは、Vue を利用した静的サイトジェネレーターである VitePress を使用して静的に生成されました。＃＃＃＃＃＃＃＃＃＃＃＃こんにちは世界＃＃＃＃＃＃＃＃＃

サーバーサイドレンダリングを実際に体験する準備をしてください。サーバー側レンダリング (つまり SSR) は複雑に思えますが、単純な Node スクリプトでこの機能を実現するには 3 つの手順だけが必要です:

// 步骤 1:创建一个Vue实例
var Vue = require(&#39;vue&#39;)
var app = new Vue({
  render: function (h) {
    return h(&#39;p&#39;, &#39;hello world&#39;)
  }
})

// 步骤 2: 创建一个渲染器
var renderer = require(&#39;vue-server-renderer&#39;).createRenderer()

// 步骤 3: 将 Vue实例 渲染成 HTML

renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
  // => <p server-rendered="true">hello world</p>
})

これは難しくありません。もちろん、この例は、これらの関数がどのように機能するかを調べるためのほとんどのアプリケーションよりも簡単です。

Express Web サーバーを介したシンプルなサーバー側レンダリング

Webサーバーを使用しないサーバーサイドレンダリングとは言いにくいので、補足しましょう。 ES5 のみを使用し、他のビルドステップや Vue プラグインを使用しない、非常にシンプルなサーバー側レンダリングアプリケーションを構築します。

ユーザーがページに費やした時間を通知するアプリを起動します。

new Vue({
  template: &#39;<div>你已经在这花了 {{ counter }} 秒。</div>&#39;,
  data: {
    counter: 0
  },
  created: function () {
    var vm = this
    setInterval(function () {
      vm.counter += 1
    }, 1000)
  }
})

サーバー側レンダリングに適応させるには、ブラウザーとノード:

ブラウザーでレンダリングできるようにいくつかの変更を加える必要があります。アプリケーションインスタンスがグローバルコンテキスト（ウィンドウ）に追加され、インストールできるようになります。
Node では、ファクトリ関数をエクスポートすると、リクエストごとにアプリケーションインスタンスを作成できます。

これを実装するには小さなテンプレートが必要です:

// assets/app.js
(function () { &#39;use strict&#39;
  var createApp = function () {
    // ---------------------
    // 开始常用的应用代码
    // ---------------------

    // 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。

    return new Vue({
      template: &#39;<div id="app">你已经在这花了 {{ counter }} 秒。</div>&#39;,
      data: {
        counter: 0
      },
      created: function () {
        var vm = this
        setInterval(function () {
          vm.counter += 1
        }, 1000)
      }
    })

    // -------------------
    // 结束常用的应用代码
    // -------------------
  }
  if (typeof module !== &#39;undefined&#39; && module.exports) {
    module.exports = createApp
  } else {
    this.app = createApp()
  }
}).call(this)

アプリケーションコードが完成したので、HTML ファイルを追加します。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
  <script src="/assets/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/assets/app.js"></script>
  <script>app.$mount(&#39;#app&#39;)</script>
</body>
</html>

主に、以前にアセットフォルダーに作成した app.js と vue.js ファイルを参照します。実行できる単一ページのアプリケーションがあります。

次に、実装するためにサーバー側レンダリングでは、サーバー側にステップを追加する必要があります。

rreeee

以上です。例全体。詳細な実験のためにクローンを作成します。ローカルで実行したら、ページを右クリックして [ページリソース] (または同様のもの) を選択することで、レンダラーによって選択されたサービスが実際に実行されていることを確認できます。本文では、次のようになります:

// server.js
&#39;use strict&#39;

var fs = require(&#39;fs&#39;)
var path = require(&#39;path&#39;)

// 定义全局的Vue为了服务端的app.js
global.Vue = require(&#39;vue&#39;)

// 获取HTML布局
var layout = fs.readFileSync(&#39;./index.html&#39;, &#39;utf8&#39;)

// 创建一个渲染器
var renderer = require(&#39;vue-server-renderer&#39;).createRenderer()

// 创建一个Express服务器
var express = require(&#39;express&#39;)
var server = express()

// 部署静态文件夹为 "assets"文件夹
server.use(&#39;/assets&#39;, express.static(
  path.resolve(__dirname, &#39;assets&#39;)
))

// 处理所有的Get请求
server.get(&#39;*&#39;, function (request, response) {
  // 渲染我们的Vue应用为一个字符串
  renderer.renderToString(
    // 创建一个应用实例
    require(&#39;./assets/app&#39;)(),
    // 处理渲染结果
    function (error, html) {
      // 如果渲染时发生了错误
      if (error) {
        // 打印错误到控制台
        console.error(error)
        // 告诉客户端错误
        return response
          .status(500)
          .send(&#39;Server Error&#39;)
      }
      // 发送布局和HTML文件
      response.send(layout.replace(&#39;<div id="app"></div>&#39;, html))
    }
  )
})

// 监听5000端口
server.listen(5000, function (error) {
  if (error) throw error
  console.log(&#39;Server is running at localhost:5000&#39;)
})

ストリーミングレスポンスVue はストリーミングレンダリングもサポートしています。この設定は、ストリーミングをサポートする Web サーバーに適用されます。 HTML を一度にすべて書き込むのではなく、生成して対応するストリームに全般的に書き込むことができます。その結果、リクエストは欠点なく、より速く処理されるようになります。

前のセクションのアプリケーションコードをストリーミングレンダリングに適したものにするには、server.get('*',...) を次のコードに置き換えるだけです:

<div id="app" server-rendered="true">You have been here for 0 seconds&period;</div>

これは以前のものと同じです。バージョン管理は複雑であり、これさえもあなたにとっては新しい概念ではないかもしれません。

#応答の最後に HTML を書き込みます
#エラーを処理します

Vue のサーバー側レンダリングはデフォルトで非常に高速ですが、レンダリングされたコンポーネントをキャッシュすることでパフォーマンスをさらに向上させることができます。これは高度な機能とみなされますが、間違ったコンポーネントがキャッシュされた場合 (または正しいコンポーネントに間違ったコンテンツが含まれている場合)、アプリが正しくレンダリングされなくなります。特記事項: グローバル状態 (vuex からの状態など) に依存するサブコンポーネントを含むコンポーネントはキャッシュすべきではありません。これを行うと、サブコンポーネント (実際にはサブツリー全体) もキャッシュされます。したがって、スロットのフラグメントやサブコンポーネントが存在する状況には特に注意してください。

設定

警告条件以外では、次のメソッドを使用してコンポーネントをキャッシュできます。まず、レンダラーにキャッシュオブジェクトを提供する必要があります。これは、最大 1000 個の独立したレンダリングをキャッシュする lru-cache

<div id="app"></div>

を使用した簡単な例です。コンテンツへのキャッシュの詳細な構成については、

lru-cache settings

を参照してください。次に、キャッシュしたいコンポーネントに対して、次のように指定できます:

一意の名前

serverCacheKey 関数は、一意のコンポーネントスコープを返します

例:

// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]

// 处理所有的Get请求
server.get('*', function (request, response) {
  // 渲染我们的Vue实例作为流
  var stream = renderer.renderToStream(require('./assets/app')())

  // 将预先的HTML写入响应
  response.write(preAppHTML)

  // 每当新的块被渲染
  stream.on('data', function (chunk) {
    // 将块写入响应
    response.write(chunk)
  })

  // 当所有的块被渲染完成
  stream.on('end', function () {
    // 将post-app HTML写入响应
    response.end(postAppHTML)
  })

  // 当渲染时发生错误
  stream.on('error', function (error) {
    // 打印错误到控制台
    console.error(error)
    // 告诉客服端发生了错误
    return response
      .status(500)
      .send('Server Error')
  })
})

キャッシュに最適なコンポーネント

純粋なコンポーネントはすべて安全にキャッシュできます。これは、同じデータをどのコンポーネントに渡しても同じ HTML が生成されることを保証するためです。これらのシナリオの例には、次のものが含まれます。

#静的コンポーネント (たとえば、serverCacheKey 関数が true を返すことができるように、常に同じ HTML を試行します)

リストコンポーネント(リストが大きい場合、キャッシュするとパフォーマンスが向上します))
説明:
ここで、サーバーの背後にある基本概念を理解する必要があります。サイドレンダリング。ただし、ビルドプロセス、ルーティング、Vuex にはそれぞれ独自の考慮事項があります。

vuejs 入門チュートリアル

、基本プログラミングビデオ )

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

声明：

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

前の記事：Vue ミックスインはライフサイクルを使用できますか?次の記事：Vue ミックスインはライフサイクルを使用できますか?

続きを見る