传统web开发
网页内容在服务器渲染完成一次性传输到浏览器,这种方式查看源码,浏览器拿到的是全部的dom结构
单页应用spa
单页应用优秀的用户体验,使其逐渐成为主流,页面内容有js渲染出来,这种方式称为客户端渲染。打开网页源码,浏览器拿到的只有宿主元素#app,并没有内容。
存在两个问题:
-
SEO不友好
-
首屏加载时间相对较长
服务端渲染 Server Side Render
ssr解决方案,后端渲染出完整的首屏dom结构返回,前端拿到的内容包括首屏及完整spa结构,应用激活后依然按照spa方式运行,这种页面渲染方式被称为服务端渲染(ssr)
ssr是折中方案,利用vue语法编写方案,还能在服务端渲染html内容
使用Vue SSR
- 新建vue-cli3工程
vue create ssr
- 安装依赖
npm install vue-server-renderer koa -S
这里我用的koa服务器 - 启动脚本
创建一个
koa
服务器,将vue ssr
集成进来 ./server/simple-ssr.js
const Koa = require('koa');
const Router = require('koa-router')
const Vue = require("vue");
//拿出render的工厂函数
const {createRenderer} = require('vue-server-renderer');
const app = new Koa();
const router = new Router();
//创建render
const renderer = createRenderer();
app.use(router.routes())
const vm = new Vue({
data:{
name:'hello world'
},
template:`<div><h1>{{name}}</h1></div>`
});
router.get('/',async ctx => {
try{
//将 Vue 实例渲染为 HTML
const html = await renderer.renderToString(vm);
ctx.body = html;
}catch(error){
ctx.body = "Internal Server Error";
}
});
app.listen(3001,() => {
console.log("启动成功");
})
- 启动执行
node ./server/simple-ssr.js
路由
路由支持仍然使用vue-router
- 配置 ./router/index.js
import Vue from "vue";
import Router from "vue-router";
import Index from "../views/index";
import Detail from "../views/detail"
Vue.use(Router);
// 导出工厂函数,他可以返回新的Router实例
// 每个请求一个单独实例避免状态相互污染
export function createRouter(){
return new Router({
mode:'history',
routes:[
{path:"/",component:Index},
{path:"/detail",component:Detail}
]
})
}
整合vuex
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;
}
},
actions:{
add({commit}){
commit('add')
}
}
})
}
构建
对于客户端应用程序和服务器应用程序,我们都要使用webpack打包,服务器需要[服务器bundle] 然后用于服务器渲染(ssr),而[客户端bundle]会发送给浏览器,用于混合静态标记。
代码结构
src
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口,用于静态内容“激活”
└── entry-server.js # 服务端入口,用于首屏内容渲染
vue实例创建
./main.js
import Vue from "vue";
import App from "./App.vue";
import {createRouter} from "./router";
import {createStore} from "./store";
// context是服务器传递给vue实例的参数对象
export function createApp(context){
// 1.获取router实例
const router = createRouter();
// 2.获取store实例
const store = createStore();
// 3.创建vue实例
const app = new Vue({
router,
store,
context,
render: h => h(App)
});
return {app,router,store};
}
服务端入口
./entry-server.js
// 给服务器提供一个方法,可以根据接收url设置路由地址,然后返回创建Vue实例
// 在服务器执行
import {createApp} from "./main";
export default context => {
return new Promise((resolve,reject) => {
// 获取vue/router实例
const {app,router,store} = createApp(context);
// 跳转至首屏
router.push(context.url);
// onReady完成时,异步的任务都会结束
router.onReady(() => {
resolve(app);
},reject);
});
}
客户端入口
./entry-client.js
// 挂载创建vue实例: 将来在浏览器执行
import {createApp} from "./main";
// 创建vue实例
const {app,router,store} = 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)的依赖模块列入白名单
allowlist: [/\.css$/]
})
: undefined,
optimization: {
splitChunks: TARGET_NODE ? false : undefined
},
// 这是将服务器的整个输出构建为单个 JSON 文件的插件。
// 服务端默认文件名为 `vue-ssr-server-bundle.json`
// 客户端默认文件名为 `vue-ssr-client-manifest.json`。
plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}),
chainWebpack: config => {
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 --mode server",
"build": "npm run build:server && npm run build:client",
}
- 执行打包
npm run build
宿主文件
- 最后需要定义宿主文件,修改./public/index.html
注意 <!--vue-ssr-outlet-->
注释 -- 这里将是应用程序 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>vue-study</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
服务器启动文件
修改服务器启动文件,现在需要处理所有路由 ./server/ssr.js
const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const Static = require('koa-static');
const app = new Koa();
const resolve = dir => {
return path.resolve(__dirname,dir)
}
// 第 1 步:开放dist/client目录,关闭默认下载index页的选项,不然到不了后面的路由。
app.use(Static(resolve('../dist/client'),{index: false}))
// 第 2 步:获得一个createBundleRender
const {createBundleRenderer} = require("vue-server-renderer");
// 第 3 步: 导入服务端打包文件
const bundle = require(resolve("../dist/server/vue-ssr-server-bundle.json"));
// 第 4 步:创建渲染器
const template = fs.readFileSync(resolve("../public/index.html"),"utf-8");
const clientManifest = require(resolve("../dist/client/vue-ssr-client-manifest.json"));
const renderer = createBundleRenderer(bundle,{
runInNewContext:false, //https://ssr.vuejs.org/zh/api/#runinnewcontext
template, //宿主文件
clientManifest //客户端清单
});
//对于任何请求,app将调用该异步函数处理请求
app.use(async (ctx,next) => {
console.log(ctx.url);
// 设置url和title两个重要参数
const context = {
title:'ssr test',
url:ctx.url
}
const html = await renderer.renderToString(context);
ctx.body = html;
})
const port = 3001;
app.listen(port,function(){
console.log(`server started at localhost:${port}`);
})
数据预取
如果应用依赖于一些异步数据,那么在开始渲染前,需要先预取和解析好这些数据
- 异步获取数据 ./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;
},
init(state,count){
state.count = count;
}
},
actions:{
// 加一个异步请求count的请求
getCount({commit}){
return new Promise(resolve => {
setTimeout(() => {
commit('init',Math.random() * 100);
resolve();
},1000)
})
},
add({commit}){
commit('add')
}
}
})
}
- 组件中的数据预取逻辑,index.vue
<template>
<div class="about">
index page
{{$store.state.count}}
<button @click="$store.dispatch('add')">add</button>
</div>
</template>
<script>
export default{
//约定预取逻辑编写在预取狗子asyncData中
asyncData({store,route}){
return store.dispatch("getCount")
}
}
</script>
- 服务端数据预取, entery-server.js
// 给服务器提供一个方法,可以根据接收url设置路由地址,然后返回创建Vue实例
// 在服务器执行
import {createApp} from "./main";
export default context => {
return new Promise((resolve,reject) => {
// 获取vue/router实例
const {app,router,store} = createApp(context);
// 跳转至首屏
router.push(context.url);
// onReady完成时,异步的任务都会结束
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
// 当使用template时,context.state将作为window.__INITIAL_STATE__ 状态自动嵌入到最终的HTML
// 在客户挂载到应用程序之前,store就应该获取到状态:
if(window.__INITIAL_STATE__){
store.replaceState(window.__INITIAL_STATE__);
}
- asyncData默认只有在首屏渲染的时候执行一次,如果不是在首屏使用还是在其他页面使用就得不到数据,所以确保客户端每个组件如果有asyncData,要执行之。在main.js加入混入
Vue.mixin({
beforeMount(){
const {asyncData} = this.$options;
if(asyncData){
// 将获取数据操作分配给promise
// 以便在组件中,我们可以在数据准备就绪后
// 通过运行`this.dataPromise.then(...)`来执行其他任务
this.dataPromise = asyncData({
store:this.$store,
route:this.$route
})
}
}
})