前端的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.jsconst 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 提供一个模板。此模板应蕴含正文 <!--vue-ssr-outlet-->，作为渲染应用程序内容的占位符。
首先创立一个 HTML 模板 index.template.html
<!--index.template.html --><!doctype html><html lang="en"><head><title></title></head><body><!--vue-ssr-outlet--></body></html>这里的 <!--vue-ssr-outlet--> 正文就是应用程序 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.jsconst 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.jsconst 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.jsconst 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.json2.配置路由
应用 vue-router
$ npm intall vue-router --save-dev新建router.js
相似于 createApp，咱们也须要给每个申请一个新的 router 实例，所以文件导出一个 createRouter 函数
// router.jsimport 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.jsimport { 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.jsconst 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.jsconst { 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.jsconst 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.jsconst { 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/