vue服务端渲染---ssr（1）

2020-07-11 本文已影响0人成熟稳重的李先生

什么是服务端渲染呢？我们平时做的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中了。

vue服务端渲染---ssr（1）

猜你喜欢

热点阅读