关于javascript:SSR-服务器端渲染

6次阅读

共计 7527 个字符，预计需要花费 19 分钟才能阅读完成。

前端的 SSR 计划最近几年比拟热门，React 的 next 框架 , Vue 的 nuxt 框架等等

应用 Vue.js 构建客户端应用程序时，默认状况下是在浏览器中输入 Vue 组件，进行生成 DOM 和操作 DOM。而应用 SSR 能够将同一个组件渲染为服务器端的 HTML 字符串，而后将它们间接发送到浏览器，最初将动态标记 ” 混合 ” 为客户端上齐全交互的应用程序。

浏览器端渲染：指的是用 JS 去生成 HTML，例如 React, Vue 等前端框架做的路由

服务器端渲染：指的是用后盾语言通过一些模版引擎生成 HTML，例如 Java 配合 VM 模版引擎、NodeJS 配合 Jade 等，将数据与视图整顿输入为残缺的 HTML 文档发送给浏览器。

1. 起步

新建我的项目，装置 Vue 与 SSR 依赖包 vue-server-renderer

新建空文件夹

$ mkdir testSSR

进入 testSSR 目录

$ cd testSSR

初始化，生成 package.json

$ npm init

装置依赖

npm install vue vue-server-renderer --save-dev

先应用 vue-server-renderer 渲染一个简略的 Vue 组件

// test.js
const Vue = require('vue')
const app = new Vue({ // 创立一个 Vue 实例
    template: `<div>Hello World</div>`
})
const vueRenderer = require('vue-server-renderer')
const renderer = vueRenderer.createRenderer() // 创立一个 renderer
// 通过 renderToString 将 Vue 实例渲染为 HTML
// 函数签名: renderer.renderToString(vm, context?, callback?): ?Promise<string>
renderer.renderToString(app, (err, doc) => {if (err) throw err
    console.log(doc)
})

运行 test.js，输入渲染后的 HTML

留神到应用程序的根元素上增加了一个非凡的属性 data-server-rendered，这是让客户端 Vue 晓得这部分 HTML 是由 Vue 在服务端渲染的。

2. 引入模板

上例只是渲染一个 vue 组件，通常应用程序都会形象出一个或多个模板来嵌入不同的组件。
Render 的 template 选项为整个页面的 HTML 提供一个模板。此模板应蕴含正文 ，作为渲染应用程序内容的占位符。

首先创立一个 HTML 模板 index.template.html

<!--index.template.html -->
<!doctype html>
<html lang="en">
<head><title></title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>

这里的  正文就是应用程序 HTML 标记注入的中央。
将此模板通过 fs 读取，而后在 createRenderer() 时注入，批改 test.js 如下：

运行 test.js 能够看到之前定义的 hello world 组件已嵌入模板中

选取基于 node.js 的 express 作为服务器，示例 vue ssr 在服务器端的工作。

1. 启动 express server

进入我的项目

$ cd testSSR

装置 express

$ npm install express --save-dev

新建 server.js

const express = require('express')
const server = express()
server.get('/mytest', (request, response) => {response.send("hello world"+request.url)
})
server.listen(8000)

运行$ node server.js 后关上浏览器拜访 http://localhost:8000/mytest

服务器启动胜利。

2.Renderer 渲染

首先创立一个能够反复执行的工厂函数，为每个申请创立新的 Vue 实例，如果创立一个单例对象，它将在每个传入的申请之间共享，很容易导致穿插申请状态净化。

进入我的项目

$ cd testSSR

新建 app.js

// app.js
const Vue = require('vue')
module.exports = function createApp (context) {
    return new Vue({
        data: {url: context.url},
        template: `<div>Vue SSR URL: {{url}}</div>`
    })
}

而后在 server.js 中引入 app.js 创立实例，并配置路由与申请渲染

// server.js
const createApp = require('./app')
const vueRenderer = require('vue-server-renderer')
const renderer = vueRenderer.createRenderer()
server.get('/ssr', (request, response) => {const context = { url: request.url}
    const app = createApp(context)
    renderer.renderToString(app, (err, doc) => {if (err) throw err
        response.send(doc)
    })
})

运行$ node server.js 后关上浏览器拜访 http://localhost:8000/ssr?sadas=2222

3. 插入模板

减少页面模板，应用之前定义的 index.template.html 作为模板，注入到一个新的 renderer

// server.js
const fs = require('fs')
const rendererTmp = vueRenderer.createRenderer({template: fs.readFileSync('./index.template.html', 'utf-8') // 同步读取文件
})
server.get('/template', (request, response) => {const context = { url: request.url}
    const app = createApp(context)
    rendererTmp.renderToString(app, (err, doc) => {if (err) throw err
        response.send(doc)
    })
})

运行$ node server.js 后关上浏览器拜访 http://localhost:8000/template

能够看到一个简略的服务器端渲染曾经实现。

1.SSR 我的项目构造

通常 Vue 应用程序是由 webpack 和 vue-loader 构建，并且许多 webpack 特定性能不能间接在 Node.js 中运行（例如通过 file-loader 导入文件，通过 css-loader 导入 CSS）。
对于客户端应用程序和服务器应用程序，咱们都要应用 webpack 打包 – 服务器须要「服务器 bundle」而后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合动态标记。根本流程如下图。

所以一个根本的我的项目目录可能如下：

src
├── config
│   ├── webpack.base.config.js
│   ├── webpack.client.config.js
│   └── webpack.server.config.js
├── components
│   ├── Foo.vue
│   └── xxx.vue
├── build
│   ├── index.js
│   └── xxx.js
├── template
│   ├── index.template.html
│   └── xxx.html
├── route.js # vue-router 路由
├── App.vue # 根实例
├── app.js # 通用 entry
├── entry-client.js # 配置 仅运行于浏览器
├── entry-server.js # 配置 仅运行于服务器
├── server.js # 服务器
├── webpack.config.js
└── package.json

2. 配置路由

应用 vue-router

$ npm intall vue-router --save-dev

新建 router.js

相似于 createApp，咱们也须要给每个申请一个新的 router 实例，所以文件导出一个 createRouter 函数

// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter() {
    return new Router({
        mode: 'history',
        routes: [// ...]
    })
}

批改 app.js，增加路由

import Vue from 'vue'
import App from './App.vue'
import {createRouter} from './router'
export function createApp ( ) {
    // 创立 router 实例
    const router = createRouter()
    const app = new Vue({
        // 注入 router 到根 Vue 实例
        router,
        render: h => h(App)
    })
    // 返回 app 和 router
    return {app, router}
}

3. 配置 webpack

新建 entry-server.js，实现服务器端路由逻辑

// entry-server.js
import {createApp} from './app'
export default context => {
    // 因为有可能会是异步路由钩子函数或组件，所以咱们将返回一个 Promise，// 以便服务器可能期待所有的内容在渲染前，// 就曾经准备就绪。return new Promise((resolve, reject) => {const { app, router} = createApp()
        // 设置服务器端 router 的地位
        router.push(context.url)
        // 等到 router 将可能的异步组件和钩子函数解析完
        router.onReady(() => {const matchedComponents = router.getMatchedComponents()
            // 匹配不到的路由，执行 reject 函数，并返回 404
            if (!matchedComponents.length) {return reject({ code: 404})
            }
            // Promise 应该 resolve 应用程序实例，以便它能够渲染
            resolve(app)
        }, reject)
    })
}

服务器端配置 webpack.server.config.js，是用于生成传递给 createBundleRenderer 的 server bundle

// webpack.server.config.js
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
    // 将 entry 指向应用程序的 server entry 文件
    entry: '/path/to/entry-server.js',
    // 这容许 webpack 以 Node 实用形式 (Node-appropriate fashion) 解决动静导入(dynamic import)，// 并且还会在编译 Vue 组件时，// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。target: 'node',
    // 对 bundle renderer 提供 source map 反对
    devtool: 'source-map',
    // 此处告知 server bundle 应用 Node 格调导出模块(Node-style exports)
    output: {libraryTarget: 'commonjs2'},
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。能够使服务器构建速度更快，// 并生成较小的 bundle 文件。externals: nodeExternals({
        // 不要外置化 webpack 须要解决的依赖模块。// 你能够在这里增加更多的文件类型。例如，未解决 *.vue 原始文件，// 你还应该将批改 `global`（例如 polyfill）的依赖模块列入白名单
        whitelist: /\.css$/
    }),
    // 这是将服务器的整个输入
    // 构建为单个 JSON 文件的插件。// 默认文件名为 `vue-ssr-server-bundle.json`
    plugins: [new VueSSRServerPlugin()
    ]
})

在生成 vue-ssr-server-bundle.json 之后，只需将文件门路传递给 createBundleRenderer：

// server.js
const {createBundleRenderer} = require('vue-server-renderer')
const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', {// ……renderer 的其余选项})

除了 server bundle 之外，咱们还能够生成客户端构建清单 (client build manifest)。应用客户端清单(client manifest) 和服务器 bundle(server bundle)，renderer 当初具备了服务器和客户端的构建信息，因而它能够主动推断和注入资源预加载 / 数据预取指令(preload / prefetch directive)，以及 css 链接 / script 标签到所渲染的 HTML。

// webpack.client.config.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
module.exports = merge(baseConfig, {
    entry: '/path/to/entry-client.js',
    plugins: [
        // 重要信息：这将 webpack 运行时拆散到一个疏导 chunk 中，// 以便能够在之后正确注入异步 chunk。// 这也为你的 应用程序 /vendor 代码提供了更好的缓存。new webpack.optimize.CommonsChunkPlugin({
        name: "manifest",
        minChunks: Infinity
        }),
        // 此插件在输入目录中
        // 生成 `vue-ssr-client-manifest.json`。new VueSSRClientPlugin()]
})

这样就能够生成客户端构建清单(client build manifest)。

4.Bundle Renderer

到目前为止，咱们假如打包的服务器端代码，将由服务器通过 require 间接应用：

const createApp = require('/path/to/built-server-bundle.js')

然而在每次编辑过应用程序源代码之后，都必须进行并重启服务。这在开发过程中会影响开发效率。此外，Node.js 自身不反对 source map。
vue-server-renderer 提供一个名为 createBundleRenderer 的 API，用于解决此问题，通过应用 webpack 的自定义插件，server bundle 将生成为可传递到 bundle renderer 的非凡 JSON 文件。

// server.js
const {createBundleRenderer} = require('vue-server-renderer')
const template = require('fs').readFileSync('/path/to/template.html', 'utf-8')
const serverBundle = require('/path/to/vue-ssr-server-bundle.json')
const clientManifest = require('/path/to/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(serverBundle, {
    runInNewContext: false, // 举荐
    template, //（可选）页面模板
    clientManifest //（可选）客户端构建 manifest
})
// 在服务器处理函数中……
server.get('/', (req, res) => {const context = { url: req.url}
    // 这里无需传入一个应用程序，因为在执行 bundle 时曾经主动创立过。// 当初咱们的服务器与应用程序曾经解耦！renderer.renderToString(context, (err, html) => {
        // 解决异样……
        res.end(html)
    })
})

此外，vue SSR 提供 css 治理、缓存治理、流式渲染等，期待当前持续整顿。
Vue SSR 指南：https://ssr.vuejs.org/zh/
API 参考：https://ssr.vuejs.org/zh/api/

正文完

javascript

发表至： javascript

2020-09-18

0

让我们来重新设计一下 koa-router

cross-env使用记录

vue 组件动态渲染

关于javascript:Arrayreduce方法详解及高级技巧

关于程序员:第二届-106-点人脸关键点定位大赛开启-谁能打造最佳轻量级算法

关于javascript:SSR-服务器端渲染

简介：

一、入门配置

1. 起步

新建空文件夹

进入 testSSR 目录

初始化，生成 package.json

装置依赖

先应用 vue-server-renderer 渲染一个简略的 Vue 组件

运行 test.js，输入渲染后的 HTML

2. 引入模板

首先创立一个 HTML 模板 index.template.html

运行 test.js 能够看到之前定义的 hello world 组件已嵌入模板中

二、服务器端整合

1. 启动 express server

进入我的项目

装置 express

新建 server.js

2.Renderer 渲染

进入我的项目

新建 app.js

而后在 server.js 中引入 app.js 创立实例，并配置路由与申请渲染

3. 插入模板

三、我的项目工程化

1.SSR 我的项目构造

2. 配置路由

应用 vue-router

新建 router.js

批改 app.js，增加路由

3. 配置 webpack

新建 entry-server.js，实现服务器端路由逻辑

服务器端配置 webpack.server.config.js，是用于生成传递给 createBundleRenderer 的 server bundle

4.Bundle Renderer

四、其余

站内搜索