Vue.jsおよびASP.NET Coreのサーバーサイドレンダリング機能

フロントエンドで Vue.js を使用します。Vue のサーバー側レンダリングは、2 番目のバージョンまでサポートされていませんでした。 この例では、Vue.js のサーバー側レンダリング機能を ASP.NET Core と統合する方法を示します。 サーバー側では、ASP.NET Core API を提供する Microsoft.AspNetCore.SpaServices パッケージを使用しました。これにより、コンテキスト情報を使用して Node.js でホストされる JavaScript コードを呼び出し、結果の HTML 文字列をレンダリングされたページに挿入できます。

この例では、アプリケーションはメッセージのリストを表示し、サーバーは最後の 2 つのメッセージ (日付でソート) のみを表示します。残りのメッセージは、「メッセージを取得」ボタンをクリックしてサーバーからダウンロードできます。

プロジェクトの構造は次のとおりです:

.
├── VuejsSSRSample
| ├── Properties
| ├── References
| ├── wwwroot
| └── Dependencies
├── Controllers
| └── HomeController.cs
├── Models
| ├── ClientState.cs
| ├── FakeMessageStore.cs
| └── Message.cs
├── Views
| ├── Home
| | └── Index.cshtml
| └── _ViewImports.cshtml
├── VueApp
| ├── components
| | ├── App.vue
| | └── Message.vue
| ├── vuex
| | ├── actions.js
| | └── store.js
| ├── app.js
| ├── client.js
| ├── renderOnServer.js
| └── server.js
├── .babelrc
├── appsettings.json
├── Dockerfile
├── packages.json
├── Program.cs
├── project.json
├── Startup.cs
├── web.config
├── webpack.client.config.js
└── webpack.server.config.js

ご覧のとおり、Vue アプリケーションは VueApp フォルダーの下にあり、ミューテーションとアクションを含む単純な Vuex ストアと、いくつかのその他のファイルの 2 つのコンポーネントがあります。次に、app.js、client.js、renderOnServer.js、server.js について説明します。

Vue.js サーバーサイド レンダリングを実装する

サーバーサイド レンダリングを使用するには、Vue アプリケーションから 2 つの異なるバンドルを作成する必要があります。1 つはサーバーサイド用 (Node によって実行される) .js) 、もう 1 つはブラウザーとクライアントで実行されるハイブリッド アプリ用です。

app.js

このモジュールで Vue インスタンスをブートストラップします。両方のバンドルで使用されます。

import Vue from 'vue';
import App from './components/App.vue';
import store from './vuex/store.js';
const app = new Vue({
 store,
 ...App
});
export { app, store };

server.js

このサーバー バンドルのエントリ ポイントは、レンダー呼び出しから任意のデータをプッシュするために使用できるコンテキスト プロパティを持つ関数をエクスポートします。

client.js

クライアント バンドルのエントリ ポイント。ストアの現在の状態を INITIAL_STATE という名前のグローバル Javascript オブジェクト (プリレンダリング モジュールによって作成されます) に置き換え、アプリケーションを指定された要素 (.my-app)。

import { app, store } from './app';
store.replaceState(__INITIAL_STATE__);
app.$mount('.my-app');

Webpack設定

バンドルを作成するには、2つのWebpack設定ファイル(サーバー側ビルド用とクライアント側ビルド用)を追加する必要があります。まだ行っていない場合は、npm install -g webpack を実行します。

webpack.server.config.js
const path = require('path');
module.exports = {
 target: 'node',
 entry: path.join(__dirname, 'VueApp/server.js'),
 output: {
 libraryTarget: 'commonjs2',
 path: path.join(__dirname, 'wwwroot/dist'),
 filename: 'bundle.server.js',
 },
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue',
  },
  {
  test: /\.js$/,
  loader: 'babel',
  include: __dirname,
  exclude: /node_modules/
  },
  {
  test: /\.json?$/,
  loader: 'json'
  }
 ]
 },
};
webpack.client.config.js
const path = require('path');
module.exports = {
 entry: path.join(__dirname, 'VueApp/client.js'),
 output: {
 path: path.join(__dirname, 'wwwroot/dist'),
 filename: 'bundle.client.js',
 },
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue',
  },
  {
  test: /\.js$/,
  loader: 'babel',
  include: __dirname,
  exclude: /node_modules/
  },
 ]
 },
};

webpack --config webpack.server.config.js を実行します。操作が成功すると、/wwwroot/dist/bundle.server.js でサーバー バンドルを見つけることができます。クライアント バンドルを取得するには、webpack --config webpack.client.config.js を実行してください。関連する出力は /wwwroot/dist/bundle.client.js にあります。

バンドル レンダリングの実装

このモジュールは ASP.NET Core によって実行され、次の役割を果たします:

以前に作成したサーバー側バンドルのレンダリング

**window.__ INITIAL_STATE__** を次のように設定しますサーバーから送信されたオブジェクト

process.env.VUE_ENV = 'server';
const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, '../wwwroot/dist/bundle.server.js')
const code = fs.readFileSync(filePath, 'utf8');
const bundleRenderer = require('vue-server-renderer').createBundleRenderer(code)
module.exports = function (params) {
 return new Promise(function (resolve, reject) {
 bundleRenderer.renderToString(params.data, (err, resultHtml) => { // params.data is the store's initial state. Sent by the asp-prerender-data attribute
  if (err) {
  reject(err.message);
  }
  resolve({
  html: resultHtml,
  globals: {
   __INITIAL_STATE__: params.data // window.__INITIAL_STATE__ will be the initial state of the Vuex store
  }
  });
 });
 });
};

は ASP.NET Core 部分を実装します

前に述べたように、Node.js でホストされている Javascript を簡単に呼び出すためのいくつかの TagHelpers を提供する Microsoft.AspNetCore.SpaServices パッケージを使用しました(内部では、SpaServices は Microsoft.AspNetCore.NodeServices パッケージを使用して Javascript を実行します)。

Views/_ViewImports.cshtml

SpaServices の TagHelper を使用するには、_ViewImports に追加する必要があります。

@addTagHelper "*, Microsoft.AspNetCore.SpaServices"
Home/Index
public IActionResult Index()
{
 var initialMessages = FakeMessageStore.FakeMessages.OrderByDescending(m => m.Date).Take(2);
 var initialValues = new ClientState() {
 Messages = initialMessages,
 LastFetchedMessageDate = initialMessages.Last().Date
 };
 return View(initialValues);
}

MessageStore (デモンストレーションのみを目的とした静的データ) から 2 つの最新のメッセージ (日付で逆順にソート) を取得し、Vuex ストア状態の初期化として使用される ClientState オブジェクトを作成します。

Vuex ストアのデフォルト状態:

const store = new Vuex.Store({
 state: { messages: [], lastFetchedMessageDate: -1 },
 // ...
});

ClientState 类：

public class ClientState
{
 [JsonProperty(PropertyName = "messages")]
 public IEnumerable<Message> Messages { get; set; }

 [JsonProperty(PropertyName = "lastFetchedMessageDate")]
 public DateTime LastFetchedMessageDate { get; set; }
}

Index View

最後に、(サーバーからの) 初期状態と Vue アプリを取得したので、たった 1 つのステップ: asp-prerender-module を使用し、 asp-prerender-data TagHelper は、Vue アプリケーションの初期値をビューにレンダリングします。

@model VuejsSSRSample.Models.ClientState
<!-- ... -->
<body>
 <p class="my-app" asp-prerender-module="VueApp/renderOnServer" asp-prerender-data="Model"></p>
 <script src="~/dist/bundle.client.js" asp-append-version="true"></script>
</body>
<!-- ... -->

asp-prerender-module 属性は、レンダリングするモジュール (この場合は VueApp/renderOnServer) を指定するために使用されます。 asp-prerender-data 属性を使用して、シリアル化されてモジュールのデフォルト関数にパラメーターとして送信されるオブジェクトを指定できます。

オリジナルのサンプルコードは次のアドレスからダウンロードできます:

http://github.com/mgyonkyosi/VuejsSSRSample

関連推奨事項:

Reactサーバーサイドレンダリング例の詳細な説明

Diyページのサーバー側レンダリング Solution_html/css_WEB-ITnose

Nuxt の Vue.js サーバー側レンダリングの実践

以上がVue.jsおよびASP.NET Coreのサーバーサイドレンダリング機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。