Vue 服务端渲染SSR示例详解
作者：我_舅是太阳 发布时间：2024-05-28 15:50:39
标签：Vue,服务端,渲染,SSR
手写Vue服务端渲染
概念：放在浏览器进行就是浏览器渲染,放在服务器进行就是服务器渲染。
客户端渲染不利于 SEO 搜索引擎优化
服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
SSR占用更多的CPU和内存资源
一些常用的浏览器API可能无法正常使用
在vue中只支持beforeCreate和created两个生命周期
一.开始vue-ssr之旅
yarn add vue-server-renderer vue
yarn add koa koa-router
createRenderer,创建一个渲染函数 renderToString, 渲染出一个字符串
const Vue = require('vue');
const render = require('vue-server-renderer');
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
const vm = new Vue({
data(){
return {msg:"hello world"}
},
template:`<div>{{msg}}</div>`
});
router.get('/',async (ctx)=>{
let r = await render.createRenderer().renderToString(vm);
ctx.body = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
${r}
</body>
</html>
`
});
app.use(router.routes());
app.listen(4000);
二.采用模板渲染
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
传入template 替换掉注释标签
const Vue = require('vue');
const render = require('vue-server-renderer');
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
const vm = new Vue({
data(){
return {msg:"hello world"}
},
template:`<div>{{msg}}</div>`
});
const template = require('fs').readFileSync('./index.html','utf8');
router.get('/',async (ctx)=>{
let r = await render.createRenderer({
template
}).renderToString(vm);
ctx.body = r;
});
app.use(router.routes());
app.listen(4000);
三.ssr目录创建
├── config
│ ├── webpack.base.js
│ ├── webpack.client.js
│ └── webpack.server.js
├── dist
│ ├── client.bundle.js
│ ├── index.html
│ ├── index.ssr.html
│ ├── server.bundle.js
│ ├── vue-ssr-client-manifest.json
│ └── vue-ssr-server-bundle.json
├── package.json
├── public
│ ├── index.html
│ └── index.ssr.html
├── server.js
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Bar.vue
│ │ └── Foo.vue
│ ├── entry-client.js
│ ├── entry-server.js
│ ├── app.js
│ ├── router.js
│ └── store.js
├── webpack.config.js
四.通过webpack实现编译vue项目
安装插件
yarn add webpack webpack-cli webpack-dev-server vue-loader vue-style-loader css-loader html-webpack-plugin @babel/core @babel/preset-env babel-loader vue-template-compiler webpack-merge
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve = (dir)=>{
return path.resolve(__dirname,dir)
}
module.exports = {
entry: resolve('./src/client-entry.js'),
output:{
filename:'[name].bundle.js',
path:resolve('dist')
},
module:{
rules:[
{
test:/.css$/,
use:['vue-style-loader','css-loader']
},
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
},
exclude:/node_modules/
},
{
test:/.vue$/,
use:'vue-loader'
}
]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./index.html'
})
]
}
app.js
import Vue from "vue";
import App from "./App.vue";
export default () => { // 为了保证实例的唯一性所以导出一个创建实例的函数
const app = new Vue({
render: h => h(App)
});
return { app };
};
client-entry.js
import createApp from "./app";
const { app } = createApp();
app.$mount("#app"); // 客户端渲染手动挂载到dom元素上
server-entry.js
import createApp from "./app";
export default () => {
const { app } = createApp();
return app; // 服务端渲染只需将渲染的实例导出即可
};
五.配置客户端打包和服务端打包
webpack.base.js
let path = require('path');
let VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'../dist')
},
module:{
rules:[
{test:/.css/,use:['vue-style-loader','css-loader']},
{
test:/.js/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
},
},
exclude:/node_modules/,
},
{test:/.vue/,use:'vue-loader'}
]
},
plugins:[
new VueLoaderPlugin()
]
}
webpack.client.js
const merge = require("webpack-merge");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const base = require("./webpack.base");
const resolve = filepath => {
return path.resolve(__dirname, filepath);
};
module.exports = merge(base, {
entry: {
client: resolve("../src/client-entry.js")
},
plugins: [
new HtmlWebpackPlugin({
template: resolve("../template/index.client.html")
})
]
});
webpack.server.js
const merge = require("webpack-merge");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const base = require("./webpack.base");
const resolve = filepath => {
return path.resolve(__dirname, filepath);
};
module.exports = merge(base, {
entry: {
server: resolve("../src/server-entry.js")
},
target: "node",
output: {
libraryTarget: "commonjs2" // 导出供服务端渲染来使用
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.ssr.html",
template: resolve("../template/index.ssr.html"),
excludeChunks: ["server"]
})
]
});
六.配置运行脚本
"scripts": {
"client:dev": "webpack-dev-server --config ./build/webpack.client.js", // 客户端开发环境
"client:build": "webpack --config ./build/webpack.client.js", // 客户端打包环境
"server:build": "webpack --config ./build/webpack.server.js" // 服务端打包环境
},
七.服务端配置
在App.vue上增加id="app"可以保证元素被正常激活
const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const path = require("path");
const app = new Koa();
const router = new Router();
const VueServerRenderer = require("vue-server-renderer");
const fs = require("fs");
// 服务端打包的结果
const serverBundle = fs.readFileSync("./dist/server.bundle.js", "utf8");
const template = fs.readFileSync("./dist/index.ssr.html", "utf8");
const render = VueServerRenderer.createBundleRenderer(serverBundle, {
template
});
router.get("/", async ctx => {
ctx.body = await new Promise((resolve, reject) => {
render.renderToString((err, html) => {
// 必须写成回调函数的方式否则样式不生效
resolve(html);
});
});
});
app.use(router.routes());
app.use(static(path.resolve(__dirname, "dist")));
app.listen(3000);
在index.ssr.html中需要手动引入客户端打包后的结果
七.通过json配置createBundleRenderer方法
实现热更新,自动增加preload和prefetch,以及可以使用sourceMap
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin'); // 在客户端打包时增加插件
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin'); // 在服务端打包时增加插件
const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const path = require("path");
const app = new Koa();
const router = new Router();
const VueServerRenderer = require("vue-server-renderer");
const fs = require("fs");
// 服务端打包的结果
// const serverBundle = fs.readFileSync("./dist/server.bundle.js", "utf8");
const template = fs.readFileSync("./dist/index.ssr.html", "utf8");
const serverBundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");
const render = VueServerRenderer.createBundleRenderer(serverBundle, {
template,
clientManifest // 自动注入客户端打包后的文件
});
router.get("/", async ctx => {
ctx.body = await new Promise((resolve, reject) => {
render.renderToString((err, html) => {
// 必须写成回调函数的方式否则样式不生效
resolve(html);
});
});
});
app.use(router.routes());
app.use(static(path.resolve(__dirname, "dist")));
app.listen(3000);
八.集成VueRouter
yarn add vue-router
import Vue from "vue";
import VueRouter from "vue-router";
import Foo from "./components/Foo.vue";
Vue.use(VueRouter);
export default () => {
const router = new VueRouter({
mode: "history",
routes: [
{ path: "/", component: Foo },
{ path: "/bar", component: () => import("./components/Bar.vue") }
]
});
return router;
};
导出路由配置
配置入口文件
import Vue from "vue";
import App from "./App.vue";
import createRouter from "./router";
export default () => {
const router = createRouter();
const app = new Vue({
router,
render: h => h(App)
});
return { app, router };
};
配置组件信息
<template>
<div id="app">
<router-link to="/"> foo</router-link>
<router-link to="/bar"> bar</router-link>
<router-view></router-view>
</div>
</template>
防止刷新页面不存在
router.get("*", async ctx => {
ctx.body = await new Promise((resolve, reject) => {
render.renderToString({ url: ctx.url }, (err, html) => {
// 必须写成回调函数的方式否则样式不生效
resolve(html);
});
});
});
保证异步路由加载完成
export default ({ url }) => {
return new Promise((resolve, reject) => {
const { app, router } = createApp();
router.push(url);
router.onReady(() => {
const matchComponents = router.getMatchedComponents();
if (!matchComponents.length) {
return reject({ code: 404 });
}
resolve(app);
}, reject);
});
};
// 服务器可以监控到错误信息，返回404
render.renderToString({ url: ctx.url }, (err, html) => {
// 必须写成回调函数的方式否则样式不生效
if (err && err.code == 404) {
resolve("404 Not Found");
}
resolve(html);
});
十.集成vuex配置
yarn add vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default ()=>{
let store = new Vuex.Store({
state:{
username:'song'
},
mutations:{
changeName(state){
state.username = 'hello';
}
},
actions:{
changeName({commit}){
return new Promise((resolve,reject)=>{
setTimeout(() => {
commit('changeName');
resolve();
}, 1000);
})
}
}
});
return store
}
// 引用vuex
import createRouter from './router';
import createStore from './store'
export default ()=>{
let router = createRouter();
let store = createStore();
let app = new Vue({
router,
store,
render:(h)=>h(App)
})
return {app,router,store}
}
在后端更新vuex
import createApp from './main';
export default (context)=>{
return new Promise((resolve)=>{
let {app,router,store} = createApp();
router.push(context.url); // 默认访问到/a就跳转到/a
router.onReady(()=>{
let matchComponents = router.getMatchedComponents(); // 获取路由匹配到的组件
Promise.all(matchComponents.map(component=>{
if(component.asyncData){
return component.asyncData(store);
}
})).then(()=>{
context.state = store.state; // 将store挂载在window.__INITIAL_STATE__
resolve(app);
});
})
})
}
在浏览器运行时替换store
// 在浏览器运行代码
if(typeof window !== 'undefined' && window.__INITIAL_STATE__){
store.replaceState(window.__INITIAL_STATE__);
}
需要执行的钩子函数
export default {
mounted() {
return this.$store.dispatch("changeName");
},
asyncData(store) {
return store.dispatch("changeName");
}
};
来源：https://juejin.cn/post/7112623627069194270
0
投稿猜你喜欢
- 本文实例讲述了python config文件的读写操作。分享给大家供大家参考，具体如下：1、设置配置文件[mysql]host = 1234
- 前言：array数组要转换成矩阵（matrix）数据类型才能进行一系列的线性运算。matrix类型也有时候要转换成array数组。代码：1.
- 为了能够使用ERWin能够进行基于MySQL数据库的物理设计，可以采用以下方法步骤(假设你已经有了一个设计好的LOGICAL MODEL)：
- 本文实例总结了python在windows和linux下获得本机本地ip地址方法。分享给大家供大家参考。具体分析如下：python的sock
可以去官网下载，我百度网盘也有都一样链接: https://pan.baidu.com/s/1fhEJu_9Zas364bvlEimRLA- 本文介绍了浅谈vue-lazyload实现的详细过程，分享给大家，也给自己留个笔记首先 ,在命令行输入npm install vue-laz
- 一、安装步骤 1.官网下载安装包2.安装一路next即可，安装位置可改到D盘3.添加环境变量将如上路径添加到系统path，不会的参
- 本文实例讲述了python实现通过代理服务器访问远程url的方法。分享给大家供大家参考。具体如下：import urllibproxies
- 用过MySQL之后，不论容量的话，发现比其他两个（sql server 、oracle）好用的多，一下子就喜欢上了。下面给那些还不知道怎么弄
- 一、SQL 连接(JOIN)1、笛卡尔积（1）当多张表进行连接查询，没有任何条件限制的时候，最终查询结果条数，是多张表条数的乘积如A表15条
- 目录前言二叉树节点定义递归构建二叉树前言本文的内容是数据结构中二叉树部分最基础的，之所以写一下主要是为了方便刷题的时候，能够在自己电脑上很快
- 1.变量的输入：input函数：input()input("请输入银行卡密码")password = input(&qu
- 今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：
- 1. 截取GB2312中文字符串 <?php //截取中文字符串 function mysubstr($str, $star
- 前言在Django的模型字段参数中，有一个参数叫做validators，这个参数是用来指定当前字段需要使用的验证器，也就是对字段数据的合法性
- gzip 是什么东东呢？百科跟我们说gzip是GNU zip的缩写，它是一个 GNU 自由软件的文件压缩程序。…gzip 的基础是 DEFL
- 本文将介绍使用Dreamweaver来制作滑动菜单的方法，言归正传，废话少说。准备工作如下： 1． 在dw中新建一个空白文档（或者打开你要添
- 前言在使用mongo数据库时，简单的查询基本上可以满足大多数的业务场景，但是试想一下，如果要统计某一荐在指定的数据中出现了多少次该怎么查询呢
- scatter绘画散点图代码如下：import matplotlib.pyplot as pltplt.scatter(x,y,
- 如下所示：File–>Settings–>Editor–> Color Scheme–>Language Defau
