乐趣区

关于javascript:手写一个简单基于Vue的ssr

jiezi

一 背景

所谓服务端渲染，指的是把 vue 组件在服务器端渲染为组装好的 HTML 字符串，而后将它们间接发送到浏览器，最初须要将这些动态标记混合在客户端上齐全可交互的应用程序。与传统 SPA（Single-Page Application – 单页应用程序）相比，服务器端渲染 (SSR) 的劣势次要在于：

  • 更好的 SEO
  • SSR 间接将 HTML 字符串传递给浏览器，大大放慢了首屏加载工夫

但也有毛病：

  • SSR 占用更多的 CPU 和内存资源
  • 一些罕用的浏览器 API 可能无奈失常应用
  • 在 vue 中只反对 beforeCreate 和 created 两个生命周期


ssr 的原理如上图所示左侧 Source 局部为源代码，所有代码有一个公共入口，就是 app.js，而后就是服务端的入口
（entry-server.js）和客户端的入口（entry-client.js）。当实现所有源代码的编写之后，咱们通过 webpack 的构建，打包出两个 bundle，别离是 server bundle 和 client bundle；当用户进行页面拜访的时候，先是通过服务端的入口，将 vue 组建组装为 html 字符串，并混入客户端所拜访的 html 模板中，最终就实现了整个 ssr 渲染的过程。

二 开启 vue-ssr 之旅

1 装置依赖

yarn add vue-server-renderer vue koa koa-router ```
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

其中 vue-server-renderer 是对于 vue 的服务端渲染的包，KOA 是 node 服务器的包。

2 HTML 文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 珠峰 </title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

vue-ssr-outlet 正文不能去掉，这是 Vue 挂载的占位符

3 server.js 文件

// vue vue-server-renderer
// koa @koa/router
const Vue = require('vue');
const fs = require('fs');
const path = require('path');
const VueServerRenderer = require('vue-server-renderer');
const vm = new Vue({data(){
        return {
            name:'zf',
            age:10
        }
    },
    template:`<div>{{name}} 往年 {{age}} 岁了 </div>`
});
const Koa = require('koa');
const Router = require('@koa/router');
const template=fs.readFileSync(path.resolve(__dirname,'index.html'),'utf8')
const render = VueServerRenderer.createRenderer({template// 采纳哪个模板去渲染});
let app = new Koa(); // 产生一个 app 的实例
let router = new Router(); // 产生一个路由的实例
router.get('/',async (ctx)=>{ctx.body = await render.renderToString(vm);
})
app.use(router.routes()); // 将路由注册到利用上
app.listen(3000); // 监听 3000 端口
退出移动版