07|07 Vue 服务端渲染 SSR 07Vue服务端渲染SSR

07服务端渲染SSR 理解 SSR 传统 web 开发
传统 web 开发，网页内容在服务端渲染完成，一次性传输到浏览器。

文章图片

// npm i express -S const express = require('express') const app = express()app.get('/', function (req, res) { res.send( `test` ) })app.listen(3000, () => { console.log('启动成功') })

打开项目，查看源码：

文章图片
浏览器拿到的，就是全部的dom结构。
SPA（Single Page App）时代
到了vue，react时代，单页应用优秀的用户体验，逐渐成为了主流，页面整体是js渲染出来的，称之为客户端渲染CSR。

文章图片
image.png

文章图片
image.png 打开页面查看源码，浏览器拿到的仅有宿主元素 #app，并没有内容。
这里可以看到单页应用的两个缺点：

首屏渲染等待时长：必须等 js 加载完毕，并且执行完毕，才能渲染出首屏；
SEO 不友好：爬虫只能拿到一个 div，认为页面是空的，不利于 SEO。

服务端渲染 Server Side Render
为了解决上面的两个问题，出现了 SSR 解决方案，后端渲染出完整的首屏 dom 结构返回，前端拿到的内容带上首屏，后续的页面操作，再用单页的路由跳转和渲染，这种渲染方式称为服务端渲染（Server Side Render）

文章图片
image.png SSR 体验：nuxt.js Nuxt.js 是一个基于 Vue 的通用应用框架。通过对客户端、服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
结论：

Nuxt 不仅仅用于服务端渲染也可用于 SPA 应用开发；
利用 Nuxt 提供的基础项目结构、异步数据加载、中间件支持、布局等特性可大幅提高开发效率；
【07|07 Vue 服务端渲染 SSR】Nuxt 可用于网站静态化。

Nuxt.js 特性

基于 Vue
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6、ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器：Sass、Less、Stylus 等等
支持 HTTP2 推送

Nuxt 渲染流程一个完整的服务器请求到渲染的流程

文章图片
image.png Nuxt 安装运行 create-nuxt-app

npx create-nuxt-app <项目名>

运行项目：

npm run dev

目录结构：

assets：资源目录 assets 用于组织未编译的静态资源如 Less、Sass 或 JavaScript；
components：组件目录 components 用于组织应用的 Vue 组件。Nuxt.js 不会扩展增强该目录 Vue 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性；
layouts：布局目录 layouts 用于组织应用的布局组件；
middleware：middleware 目录用于存放应用的中间件；
pages：页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 Vue 文件并自动生成对应的路由配置；
plugins：插件目录 plugins 用于组织那些需要在根 Vue 应用实例化之前需要运行的 JS 插件；
static：静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径下；
store：store 目录用于组织应用的 Vuex 状态树文件。Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置；
nuxt.config.js：nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

约定优于配置 page 目录中所有 *.vue 的文件生成应用的路由配置，新建 pages/users.vue

/* 展示模板 */ /* 样式代码 */ #app { }

启动后访问：http://localhost:3000/users

路由

导航

用户列表

功能和 router-link 等效。

基础路由

修改 pages 中页面组织如下：

pages/ --|users/ ----|index.vue ----|detail.vue --|index.vue

Nuxt.js 自动生成的路由配置如下：

router:{ routes:[ { name:'index', path:'/', component:'pages/index.vue' }, { name:'users', path:'/users', component:'pages/users/index.vue' }, { name:'users-detail', path:'/users/detail', component:'pages/users/detail.vue' } ] }

测试代码：

// 移动users.vue至users/并重命名为index.vue // 在users/创建detail.vue 用户列表用户列表

动态路由

以下划线作为前缀的 Vue 文件或目录会被定义为动态路由，如下面文件结构：

pages/ --|users/ ----|_id.vue

会生成如下路由配置：

{ name:'users-id', path:'/users/:id', component:'pages/users/_id.vue' }

id 是必选参数，如果 users 里面不存 index.vue，它将被作为可选参数。
测试代码：

//创建users/_id.vue 用户列表用户列表

嵌套路由

构造文件结构如下：

pages/ --|users/ ----|_id.vue ----|index.vue --|users.vue

生成的路由配置如下：

{ path: '/users', component: 'pages/users.vue', children: [ { path: '', component: 'pages/users/index.vue', name: 'users' }, { path: ':id', component:'pages/users/_id.vue', name:'users-id' } ] }

测试代码：

nuxt-child 等效于 router-view。

视图
下图展示了 Nuxt.js 如何为指定的路由配置数据和视图：

文章图片
image.png 默认布局创建 layouts/default.vue

自定义布局创建 layouts/users.vue

告诉页面 pages/users.vue 使用自定义布局：

export default { layout:'users' }

错误页面创建 layouts/error.vue

测试代码，users.vue

// 添加一个不存在数据访问 {{foo.bar}}

页面页面组件实际上是 Vue 组件，只不过 Nuxt 为这些组件添加了一些特殊的配置项：

示例代码：users.vue

export default{ head:{// 修改页面标题 title:'用户列表' } };

异步获取数据 asyncData 方法使得我们可以在设置组件的数据之前能异步获取或处理数据。
范例代码：

注意事项：

asyncData 方法会在组件（限于页面组件）每次加载之前被调用；
asyncData 可以在服务端或路由更新之前被调用；
第一个参数被设定为当前页面的上下文对象
Nuxt 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件；
由于 asyncData 方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

上下文对象的使用 users/detail.vue

可以从上下文获取参数、错误处理函数、重定向函数等有用对象
整合 axios 安装 @nuxt/axios：

npm i @nuxtjs/axios

配置：nuxt.config.js

modules: [ '@nuxtjs/axios', ], axios: { proxy: true } proxy:{ '/api/':'http://localhost:3001/' }

测试代码：

// 修改users/_id.vue async asyncData({ params, $axios }) { // 注意返回的就是响应数据 const data = https://www.it610.com/article/await $axios.$get(`/api/users/${params.id}`); if (data.ok) { return { user: data.user }; } error({ statusCode: 400, message:"id有误，查询失败" }); }// 创建server/api-server.js // npm i koa-router const Koa = require("koa"); const app = new Koa(); const Router = require('koa-router') const router = new Router({prefix:'/api/users'})const users = [{ name: "tom", id: 1 }, { name: "jerry", id: 2 }]; router.get('/:id', ctx => { const user = users.find(u => u.id == ctx.params.id) if (user) { ctx.body = {ok:1, user}; } else { ctx.body = {ok:0} } })app.use(router.routes()); app.listen(3001);

拦截器实现：

// nuxt.config.js plugins:[ '~/plugins/axios' ]// 创建plugins/axios.js export default function({$axios,redirect}){ // onRequest为请求拦截器帮助方法 $axios.onRequest(config=>{ if(!process.server) config.headers.token='jilei' }) }

Vuex 应用根目录下如果存在 store 目录，Nuxt.js 将启用 vuex 状态树。
定义各状态树时具名导出 state，mutations，getters，actions 即可。

// store/index.js export const state = () => ({ counter: 0 })export const mutations = { increment(state) { state.counter++ } }// store/users.js export const state = () => ({ list: [] }); export const mutations = { set(state, list) { state.list = list; }, add(state, name) { state.list.push({ name }); } };

生成状态树如下：

new Vuex.Store({ state: () => ({ counter: 0 }), mutations: { increment(state) { state.counter++ } }, modules: { users: { namespaced: true, state: () => ({ list: [] }), mutations: { set(state, list) { state.list = list; }, add(state,{text}){ state.list.push({ text, done:false }) } } } } })

使用状态，index 中处于根，其他文件以文件名作为模块名，users/index.vue

Vue SSR 实战新建工程
vue-cli 创建工程即可：

vue create ssr

安装依赖

npm install vue-server-renderer@2.6.10 -S

要确保 Vue、vue-server-renderer 版本一致

启动脚本
创建一个 express 服务器，将 Vue SSR 集成进来，./server/03-simple-ssr.js。

const express = require("express"); const app = express(); // 导入Vue构造函数 const Vue = require("vue"); // createRenderer用于获取渲染器 const { createRenderer } = require("vue-server-renderer"); // 获取渲染器 const renderer = createRenderer(); app.get("/", async (req, res) => { // 创建一个待渲染vue实例 const vm = new Vue({ data: { name: "林慕测试SSR" }, template: `{{name}}` }); try { // renderToString将vue实例渲染为html字符串，它返回一个Promise const html = await renderer.renderToString(vm); // 返回html给客户端 res.send(html); } catch (error) { // 渲染出错返回500错误 res.status(500).send("Internal Server Error"); } }); app.listen(3000);

路由
路由仍然支持使用 vue-router
安装若未引入 vue-router 则需要安装

npm i vue-router -S

创建路由实例每次请求的 URL 委托给 vue-router 处理：

// 引入vue-router const Router = require('vue-router') Vue.use(Router) // path修改为通配符 app.get('*', async function (req, res) { // 每次创建一个路由实例 const router = new Router({ routes: [ { path: "/", component: { template: 'index page' } }, { path: "/detail", component: { template: 'detail page' } } ] }); const vm = new Vue({ data: { msg: '林慕测试' }, // 添加router-view显示内容 template: `index detail `, router, // 挂载 }) try { // 跳转至对应路由 router.push(req.url); const html = await renderer.renderToString(vm) res.send(html) } catch (error) { res.status(500).send('渲染出错') } })

同构开发 SSR 应用
对于同构开发，我们依然使用 Webpack 打包，我们要解决两个问题：服务端首屏渲染和客户端激活。
构建流程目标是生成一个服务器 bundle 用于服务端首屏渲染，和一个客户端 bundle 用于客户端激活。

文章图片
image.png 通常前端都是 Vue 单文件组件，用 vue-loader 构建，所以 SSR 环境需要 Webpack，怎么操作呢？下面开始：
代码结构除了两个不同入口之外，其他结构和之前 Vue 应用完全相同。

src ├── router ├────── index.js # 路由声明 ├── store ├────── index.js # 全局状态 ├── main.js # 用于创建vue实例 ├── entry-client.js # 客户端入口，用于静态内容“激活” └── entry-server.js # 服务端入口，用于首屏内容渲染

路由配置创建 @/router/index.js

import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); //导出工厂函数 export function createRouter () { return new Router({ mode: 'history', routes: [ // 客户端没有编译器，这里要写成渲染函数 { path: "/", component: { render: h => h('div', 'index page') } }, { path: "/detail", component: { render: h => h('div', 'detail page') } } ] }); }

主文件主文件是负责创建 Vue 实例的工厂，每次请求均会有独立的 Vue 实例创建。创建 main.js：

import Vue from "vue"; import App from "./App.vue"; import { createRouter } from "./router"; // 导出Vue实例工厂函数，为每次请求创建独立实例 // 上下文用于给vue实例传递参数 export function createApp (context) { const router = createRouter(); const app = new Vue({ router, context, render: h => h(App) }); return { app, router }; }

服务端入口上面的 bundle 就是 Webpack 打包的服务端 bundle，我们需要编写服务端入口文件 src/entry-server.js。
它的任务是创建 Vue 实例并根据传入 URL 指定首屏。

import { createApp } from "./main"; // 返回一个函数，接收请求上下文，返回创建的vue实例 export default context => { // 这里返回一个Promise，确保路由或组件准备就绪 return new Promise((resolve, reject) => { const { app, router } = createApp(context); // 跳转到首屏的地址 router.push(context.url); // 路由就绪，返回结果 router.onReady(() => { resolve(app); }, reject); }); };

客户端入口客户端入口只需创建 Vue 实例并执行挂载，这一步称为激活。创建 entry-client.js。

import { createApp } from "./main"; // 创建vue、router实例 const { app, router } = createApp(); // 路由就绪，执行挂载 router.onReady(() => { app.$mount("#app"); });

Webpack 配置

安装依赖

npm install webpack-node-externals lodash.merge -D

具体配置：vue.config.js

// 两个插件分别负责打包客户端和服务端 const VueSSRServerPlugin = require("vue-server-renderer/server-plugin"); const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const nodeExternals = require("webpack-node-externals"); const merge = require("lodash.merge"); // 根据传入环境变量决定入口文件和相应配置项 const TARGET_NODE = process.env.WEBPACK_TARGET === "node"; const target = TARGET_NODE ? "server" : "client"; module.exports = { css: { extract: false }, outputDir: './dist/' + target, configureWebpack: () => ({ // 将 entry 指向应用程序的 server / client 文件 entry: `./src/entry-${target}.js`, // 对 bundle renderer 提供 source map 支持 devtool: 'source-map', // target设置为node使webpack以Node适用的方式处理动态导入， // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。 target: TARGET_NODE ? "node" : "web", // 是否模拟node全局变量 node: TARGET_NODE ? undefined : false, output: { // 此处使用Node风格导出模块 libraryTarget: TARGET_NODE ? "commonjs2" : undefined }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。 externals: TARGET_NODE ? nodeExternals({ // 不要外置化webpack需要处理的依赖模块。 // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件， // 还应该将修改`global`（例如polyfill）的依赖模块列入白名单 whitelist: [/\.css$/] }) : undefined, optimization: { splitChunks: undefined }, // 这是将服务器的整个输出构建为单个 JSON 文件的插件。 // 服务端默认文件名为 `vue-ssr-server-bundle.json` // 客户端默认文件名为 `vue-ssr-client-manifest.json`。 plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()] }), chainWebpack: config => { // cli4项目添加 if (TARGET_NODE) { config.optimization.delete('splitChunks') } config.module .rule("vue") .use("vue-loader") .tap(options => { merge(options, { optimizeSSR: false }); }); } };

脚本配置

安装依赖

npm i cross-env -D

定义创建脚本，package.json

"scripts": { "build:client": "vue-cli-service build", "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build", "build": "npm run build:server && npm run build:client" },

执行打包：npm run build

宿主文件最后需要定义宿主文件，修改./public/index.html

Document - 锐客网

服务器启动文件修改服务器启动文件，现在需要处理所有路由：./server/04-ssr.js

// 获取文件路径 const resolve = dir => require('path').resolve(__dirname, dir) // 第 1 步：开放dist/client目录，关闭默认下载index页的选项，不然到不了后面路由 app.use(express.static(resolve('../dist/client'), { index: false })) // 第 2 步：获得一个createBundleRenderer const { createBundleRenderer } = require("vue-server-renderer"); // 第 3 步：服务端打包文件地址 const bundle = resolve("../dist/server/vue-ssr-server-bundle.json"); // 第 4 步：创建渲染器 const renderer = createBundleRenderer(bundle, { runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主文件 clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客户端清单 }); app.get('*', async (req, res) => { // 设置url和title两个重要参数 const context = { title: 'ssr test', url: req.url } const html = await renderer.renderToString(context); res.send(html) })

整合 Vuex

安装 vuex

npm install -S vuex

store/index.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export function createStore () { return new Vuex.Store({ state: { count: 108 }, mutations: { add (state) { state.count += 1; } } }) }

挂载 store，main.js

import { createStore } from './store' export function createApp (context) { // 创建实例 const store = createStore() const app = new Vue({ store, // 挂载 render: h => h(App) }) return { app, router, store } }

使用 ./src/App.vue

{{$store.state.count}}

注意事项：注意打包和重启服务

数据预取服务器端渲染的是应用程序的“快照”，如果应用依赖于一些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。
异步数据获取，store/index.js

export function createStore () { return new Vuex.Store({ mutations: { // 加一个初始化 init (state, count) { state.count = count; }, }, actions: { // 加一个异步请求count的action getCount ({ commit }) { return new Promise(resolve => { setTimeout(() => { commit("init", Math.random() * 100); resolve(); }, 1000); }); }, }, }); }

组件中的数据预取逻辑，Index.vue

export default { asyncData ({ store, route }) { // 约定预取逻辑编写在预取钩子asyncData中 // 触发 action 后，返回 Promise 以便确定请求结果 return store.dispatch("getCount"); } };

服务端数据预取，entry-server.js

import { createApp } from "./app"; export default context => { return new Promise((resolve, reject) => { // 拿出store和router实例 const { app, router, store } = createApp(context); router.push(context.url); router.onReady(() => { // 获取匹配的路由组件数组 const matchedComponents = router.getMatchedComponents(); // 若无匹配则抛出异常 if (!matchedComponents.length) { return reject({ code: 404 }); } // 对所有匹配的路由组件调用可能存在的`asyncData()` Promise.all( matchedComponents.map(Component => { if (Component.asyncData) { return Component.asyncData({ store, route: router.currentRoute, }); } }), ) .then(() => { // 所有预取钩子 resolve 后， // store 已经填充入渲染应用所需状态 // 将状态附加到上下文，且 `template` 选项用于 renderer 时， // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。 context.state = store.state; resolve(app); }) .catch(reject); }, reject); }); };

客户端在挂载到应用程序之前，store 就应该获取到状态，entry-client.js

// 导出store const { app, router, store } = createApp(); // 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态自动嵌入到最终的 HTML // 在客户端挂载到应用程序之前，store 就应该获取到状态： if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__); }

客户端数据预取处理，main.js

Vue.mixin({ beforeMount () { const { asyncData } = this.$options; if (asyncData) { // 将获取数据操作分配给 promise // 以便在组件中，我们可以在数据准备就绪后 // 通过运行 `this.dataPromise.then(...)` 来执行其他任务 this.dataPromise = asyncData({ store: this.$store, route: this.$route, }); } }, });

总结：服务端渲染的理解以及使用场景优点