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

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 フロントエンド開発]

• 統合メンタル モデル

  : 同じ言語を使用してアプリケーション全体を開発でき、バックエンド テンプレート システムとフロントエンド フレームワークの間を行ったり来たりする必要がなく、同じ宣言型のコンポーネント指向のメンタル モデルを使用できます。

#SEO の向上
• : 検索エンジンのクローラーは、完全にレンダリングされたページを直接見ることができます。

  #SSR を使用する場合は、いくつかのトレードオフがあります。開発中です。ブラウザ側の特定のコードは、特定のライフサイクル フックでのみ使用できます。一部の外部ライブラリは、サーバー側で使用する特別な処理を必要とする場合があります。レンダリングされたアプリケーション内で実行します。

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

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

サーバーサイド レンダリング (SSR) と静的サイト生成 (SSG)

静的サイトの生成

(静的サイト生成、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('vue')
var app = new Vue({
  render: function (h) {
    return h('p', 'hello world')
  }
})

// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').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 () { 'use strict'
  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
'use strict'

var fs = require('fs')
var path = require('path')

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

// 获取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')

// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()

// 创建一个Express服务器
var express = require('express')
var server = express()

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

// 处理所有的Get请求
server.get('*', function (request, response) {
  // 渲染我们的Vue应用为一个字符串
  renderer.renderToString(
    // 创建一个应用实例
    require('./assets/app')(),
    // 处理渲染结果
    function (error, html) {
      // 如果渲染时发生了错误
      if (error) {
        // 打印错误到控制台
        console.error(error)
        // 告诉客户端错误
        return response
          .status(500)
          .send('Server Error')
      }
      // 发送布局和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 を作成します
In利用可能な場合は HTML を適用して応答を書き込みます

• #応答の最後に 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 サイトの他の関連記事を参照してください。