07服务端渲染SSR
理解 SSR
传统 web 开发
传统 web 开发，网页内容在服务端渲染完成，一次性传输到浏览器。
// npm i express -S
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send(
`
<html>
<body>
<div>
<h1>test</h1>
</div>
</body>
</html>
`
)
})
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 提供的基础项目结构、异步数据加载、中间件支持、布局等特性可大幅提高开发效率；
-
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
/* 展示模板 */
<template>
<div id='app'>
用户列表
</div>
</template>
<script>
//导入组件
export default {
name: 'App'
}
</script>
<style>
/* 样式代码 */
#app {
}
</style>
路由
- 导航
<nuxt-link to='/users'>用户列表</nuxt-link>
功能和 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
<el-button @click="$router.push('users')">用户列表</el-button>
<el-button @click="$router.push({name:'users-detail'})">用户列表</el-button>
- 动态路由
以下划线作为前缀的 Vue 文件或目录会被定义为动态路由，如下面文件结构：
pages/
--| users/
----| _id.vue
会生成如下路由配置：
{
name:'users-id',
path:'/users/:id',
component:'pages/users/_id.vue'
}
id 是必选参数，如果 users 里面不存 index.vue，它将被作为可选参数。
测试代码：
//创建users/_id.vue
<el-button @click="$router.push({name:'users-detail',query:{id:1}})">用户列表</el-button>
<el-button @click="$router.push({name:'users-id',params:{id:1}})">用户列表</el-button>
- 嵌套路由
构造文件结构如下：
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'
}
]
}
测试代码：
<template>
<div>
用户中心
<nuxt-child/>
</div>
</template>
nuxt-child 等效于 router-view。
视图
下图展示了 Nuxt.js 如何为指定的路由配置数据和视图：
image.png
默认布局
创建 layouts/default.vue
<template>
<nuxt/>
</template>
自定义布局
创建 layouts/users.vue
<template>
<div>
<h1>用户导航在这里</h1>
<nuxt/>
</div>
</template>
告诉页面 pages/users.vue 使用自定义布局：
export default {
layout:'users'
}
错误页面
创建 layouts/error.vue
<template>
<div class="container">
<h1 v-if="error.statusCode===404">页面不存在</h1>
<h1 v-else>
应用发生错误异常
</h1>
<nuxt-link to="/">首页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error']
}
</script>
测试代码，users.vue
// 添加一个不存在数据访问
{{foo.bar}}
页面
页面组件实际上是 Vue 组件，只不过 Nuxt 为这些组件添加了一些特殊的配置项：
<script>
export default {
asyncData (context) {
//每次组件加载前调用
return { name: 'World' }
},
head () {
//设置页面meta
},
// 其他功能
...
}
</script>
示例代码：users.vue
export default{
head:{// 修改页面标题
title:'用户列表'
}
};
异步获取数据
asyncData 方法使得我们可以在设置组件的数据之前能异步获取或处理数据。
范例代码：
<template>
<div>
用户列表
<ul>
<li v-for='user in users'
:key='user.id'>{{user.name}}</li>
</ul>
</div>
</template>
<script>
function getUsers () {
return new Promise(resolve => {
setTimeout(() => {
resolve([{ name: 'tom', id: 1 }, { name: 'jerry', id: 2 }])
}, 1500)
})
}
export default {
// 可以返回Promise
// asyncData(){
// return getUsers().then(users=>({users}))
// }
// 也可以使用async/await
async asyncData () {
// 使用async/await
const users = await getUsers()
return { users }
}
}
</script>
注意事项：
-
asyncData 方法会在组件（限于页面组件）每次加载之前被调用；
-
asyncData 可以在服务端或路由更新之前被调用；
-
第一个参数被设定为当前页面的上下文对象
-
Nuxt 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件；
-
由于 asyncData 方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
上下文对象的使用
users/detail.vue
<script>
export default {
async asyncData ({ query, error }) {
if (query.id) {
return { user: { name: 'tom' } }
}
error({ statusCode: 400, message: '请传递用户id' })
}
}
</script>
可以从上下文获取参数、错误处理函数、重定向函数等有用对象
整合 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 = 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
<template>
<div>
用户列表
<p @click="increment">计数: {{counter}}</p>
<p>
<input type="text" placeholder="添加用户" @keyup.enter="add($event.target.value)">
</p>
<ul>
<li v-for="user in list" :key="user.id">{{user.name}}</li>
</ul>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
function getUsers() {
return new Promise(resolve => {
setTimeout(() => {
resolve([{ name: "tom", id: 1 }, { name: "jerry", id: 2 }]);
}, 1500);
});
}
export default {
fetch({ store }) {
// fetch在创建组件前执行填充状态树
// 提交时注意命名空间
return getUsers().then(users => store.commit("users/set", users));
},
computed: {
...mapState(["counter"]),
...mapState("users", ["list"])
},
methods: {
...mapMutations(["increment"]),
...mapMutations("users", ["add"])
}
};
</script>
<style scoped>
</style>
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: `
<div >
<h1>{{name}}</h1>
</div>
`
});
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: '<div>index page</div>' } },
{ path: "/detail", component: { template: '<div>detail page</div>' } }
]
});
const vm = new Vue({
data: { msg: '林慕测试' },
// 添加router-view显示内容
template: `
<div>
<router-link to="/">index</router-link>
<router-link to="/detail">detail</router-link>
<router-view></router-view>
</div>`,
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
服务器启动文件
修改服务器启动文件，现在需要处理所有路由：./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
<h2 @click="$store.commit('add')">{{$store.state.count}}</h2>
注意事项：注意打包和重启服务
数据预取
服务器端渲染的是应用程序的“快照”，如果应用依赖于一些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。
异步数据获取，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,
});
}
},
});
总结：服务端渲染的理解以及使用场景
优点
-
利于 SEO；
-
首屏渲染速度快；
-
可以生成缓存片段，生成静态化文件；
-
节能（对比客户端渲染的耗电）。
缺点
-
高并发时，负载会很大；
-
项目复杂度提高，不容易维护；
-
依赖库的支持。
场景
-
当公司 SEO 要求很高的话，需要使用服务端渲染或者预渲染（pre-renderer）；
-
当需要开发一个新项目时，直接使用 Nuxt.js；
-
当对首屏加载时间要求很高时，可尝试使用；
-
当需要做爬虫时，服务端渲染比客户端渲染更有优势。
性能考量
-
当检测到 CPU 和内存的占用较高时，可降级到 SPA；
-
通过同构开发，提高代码复用性，保持 SPA 项目的强交互性和服务端渲染的 SEO 优化；
-
当服务器的压力较大时，可使用 node server 或 nginx 做缓存。
网友评论