什么是服务端渲染呢？我们平时做的vue单页面应用都是客户端渲染，即前端渲染。很早的时候，用chtml，jsp等等，丢给后台，让后台返回页面给前端，这样就是服务端渲染。它们各有利弊
- 服务端渲染有利于seo优化，方便爬虫，搜索引擎等更好地检索到你的网站。像新闻类，博客类的网站，是很需要考虑这些方面的。当访问的客户量太大时，它会占据大量的cpu和内存，服务器会有很大的压力。首屏加载时间会缩短，即白屏时间较短。以vue为例，服务端渲染时，因为没有dom的概念，所以一些vue的生命周期钩子不能使用，只支持baforeCreate和created。
- 客户端渲染可以减少服务器的压力，前后端分离，各做各的。但在seo这方面却要逊色许多。可能会出现白屏，首屏加载时间可能比较长。
提到vue的服务端渲染，那首先得安装包vue-server-renderer
mkdir vue-ssr
cd vue-ssr
yarn init -y
yarn add vue vue-router vuex vue-server-renderer(vue服务端渲染插件)
yarn add koa(node的框架) koa-router(后端路由) koa-static(后端返回的静态页面)
// 新建back.js（后台）
// -----------------back.js开始-------------
const Koa = require("koa");
const Router = require("koa-router");
const app = new Koa(); //创建应用
const router = new Router(); // 产生一个路由系统
router.get("/", async (ctx) => {
ctx.body = "hello";
});
app.use(router.routes()); // 使用路由系统
app.listen(3000);
// 每次修改服务端代码，都要重启服务器（使用包 nodemon，可以热更新）
// -----------------back.js结束-------------
控制台输入 nodemon back.js,这样就起了一个后台服务，在浏览器输入localhost:3000,页面显示hello。
接下来要开始重头戏了。
首先，在back.js中引入Vue，并且生成Vue实例
const Vue = require("vue"); //因为当前是node环境，不支持esModule写法导入
const vm = new Vue({
data() {
return { name: "lc", age: 18 };
},
template: `
<div>
<p>{{name}}</p>
<span>{{age}}</span>
</div>
`,
});
//因为最终的结果是将template中的内容渲染，这里就要使用包`vue-server-renderer`。
const VueServerRenderer = require("vue-server-renderer"); // vue的服务端渲染包
const render = VueServerRenderer.createRenderer(); //创建一个渲染器 （https://ssr.vuejs.org/zh/guide/#%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AA-vue-%E5%AE%9E%E4%BE%8B）
router.get("/", async (ctx) => {
ctx.body = await render.renderToString(vm);
});
刷新localhost:3000
image.png
右键查看源代码
image.png
只有一个div，不是一个正常的html文件，接下来，创建一个模板，然后把这个div插入。
创建
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--vue-ssr-outlet--> 意思是告诉vue-server-renderer将div插入到这里
</body>
</html>
然后在back.js读取这个模板，将刚才的div插入进来
//back.js
...
const fs = require("fs");
const template = fs.readFileSync(
path.resolve(__dirname, "template.html"),
"utf8"
);
const VueServerRenderer = require("vue-server-renderer"); // vue的服务端渲染包
const render = VueServerRenderer.createRenderer({template}); // 以template为模板创建一个渲染器
刷新页面，查看网页源代码
image.png
可以看到， vue的代码已经正常的插入html中了。
网友评论