ASP.NET Core 與 Vue.js 服務端渲染

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/
原做者：Mihály Gyöngyösi
譯者：oopsguy.com

我真的很喜歡使用 Vue.js 來作前端，Vue 服務端渲染直到第二個版本才被支持。在本例中，我想展現如何將 Vue.js 2 服務端渲染功能整合到 ASP.NET Core 項目中。咱們在服務端使用了 Microsoft.AspNetCore.SpaServices 包，該包提供 ASP.NET Core API，以便於咱們能夠使用上下文信息來調用 Node.js 託管的 JavaScript 代碼，並將生成的 HTML 字符串注入渲染頁面。

在此示例中，應用程序將展現一個消息列表，服務端只渲染最後兩條消息（按日期排序）。能夠經過點擊「獲取消息」按鈕從服務端下載剩餘的消息。

項目結構以下所示：

.
├── 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 文件夾下，它有兩個組件、一個包含了一個 mutation 和一個 action 的簡單 Vuex store 和一些咱們接下來要討論的文件：app.js、client.js、renderOnServer.js、server.js。

實現 Vue.js 服務端渲染

要使用服務端渲染，咱們必須在 Vue 應用中建立兩個不一樣的 bundle：一個用於服務端（由 Node.js 運行），另外一個將在瀏覽器中運行並在客戶端上混合應用。

app.js

引導此模塊中的 Vue 實例。它被兩個 bundle 使用。

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

該服務端 bundle 的入口點導出一個函數，該函數有一個 context 屬性，可用於從渲染調用中推送任何數據。

client.js

客戶端 bundle 的入口點，其使用了一個名爲 INITIAL_STATE 的全局 Javascript 對象（該對象將由預渲染模塊建立）替換 store 的當前狀態，並將應用掛載到指定的元素（.my-app）。

import { app, store } from './app';

store.replaceState(__INITIAL_STATE__);

app.$mount('.my-app');

Webpack 配置

要建立 bundle，咱們必須添加兩個 Webpack 配置文件（一個用於服務端，一個用於客戶端構建），不要忘了安裝 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 找到服端的 bundle。要獲取客戶端 bundle，請運行 webpack --config webpack.client.config.js，相關輸出能夠在 /wwwroot/dist/bundle.client.js 中找到。

實現 Bundle Render

該模塊將由 ASP.NET Core 執行，它負責：

1. 渲染咱們以前建立的服務端 bundle
2. 將 **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 部分

如以前所述，咱們使用了 Microsoft.AspNetCore.SpaServices 包，它提供了一些 TagHelper，可輕鬆調用 Node.js 託管的 Javascript（在後臺，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（僅用於演示目的的一些靜態數據）中獲取兩條最新的消息（按日期倒序排序），並建立一個 ClientState 對象，該對象將被用做 Vuex store 的初始狀態。

Vuex store 默認狀態：

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 應用，因此只需一個步驟：使用 asp-prerender-module 和 asp-prerender-data TagHelper 在視圖中渲染 Vue 應用的初始值。

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

asp-prerender-module 屬性用於指定要渲染的模塊（在本例中爲 VueApp/renderOnServer）。咱們能夠使用 asp-prerender-data 屬性指定一個將被序列化併發送到模塊的默認函數做爲參數的對象。

你能夠從如下地址下載原文的示例代碼：

http://github.com/mgyongyosi/VuejsSSRSample