vue ssr+koa2构建服务端渲染的示例代码


Posted in Javascript onMarch 23, 2020

之前做了活动投放页面在百度、360等渠道投放,采用 koa2 + 模版引擎的方式。发现几个问题

  • 相较于框架开发页面效率较低,维护性差
  • 兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器。

 服务端渲染

 服务端渲染和单页面渲染区别

查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构。而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上。

vue ssr+koa2构建服务端渲染的示例代码 

vue ssr+koa2构建服务端渲染的示例代码 

@vue/cli 4 来构建项目结构

下面代码使用最精简的实例完整代码会放到 github 上

step1 安装最新的脚手架初始化项目

yarn global add @vue/cli

step2 添加服务端文件

启动一个 web 服务下方代码中 http://localhost:9000 就是我们最终要访问到地址

const Koa = require('koa')
const path = require('path')

const resolve = file => path.resolve(__dirname, file)
const app = new Koa()
const router = require('./router')
const port = 9000
app.listen(port, () => {
 console.log(`server started at localhost:${port}`)
})
module.exports = app

这里只是启动了服务,我们需要在去读取服务端和客户端到文件,下面代码就是服务端渲染的关键步骤

const fs = require('fs')
const path = require('path')
const send = require('koa-send')
const Router = require('koa-router')
const router = new Router()
// 获取当前文件的绝对路径
const resolve = file => path.resolve(__dirname, file)
const { createBundleRenderer } = require('vue-server-renderer')
const bundle = require('../dist/vue-ssr-server-bundle.json')
const clientManifest = require('../dist/vue-ssr-client-manifest.json')
// 创建一个 BunleRender 实例用于 renderer.renderToString 将 bundle 渲染为字符串
const renderer = createBundleRenderer(bundle, {
 runInNewContext: false,
 template: fs.readFileSync(resolve('../src/index.temp.html'), 'utf-8'),
 clientManifest: clientManifest
})

const handleRequest = async ctx => {
 ctx.res.setHeader('Content-Type', 'text/html')
 // 在 2.5.0+ 版本中,此 callback 回调函数是可选项。在不传递 callback 时,此方法返回一个 Promise 对象,在其 resolve 后返回最终渲染的 HTML。
 ctx.body = await renderer.renderToString(Object.assign({}, ctx.state.deliver, { url }))
}
router.get('/home',handleRequest)
module.exports = router

vue-server-render 提供一个名为 createBundleRenderer 的 API 使用方法如下

const { createBundleRenderer } = require('vue-server-renderer')

const renderer = createBundleRenderer(serverBundle, {
 runInNewContext: false, // 推荐
 template, // (可选)页面模板
 clientManifest // (可选)客户端构建 manifest
})

通过上面的 createBundleRenderer 方法生产 render 对象最终将 bunlde 渲染为字符串,将最终的 html 返回给客户端。

bundleRenderer.renderToString([context, callback]): ?Promise<string>

step3 添加 entry-client.js,entry-server.js 入口文件

在 src 中除了这两个入口文件,其他的文件都是在客户端和服务端公用的。来看下这两个入口文件中分别干了什么。

大体的流程就是:服务端创建 vue 实例,将页面中的异步请求的数据拿到存储在容器中 --> 客户端接收到服务端发送的 html 以激活模式进行挂载,自动给根元素 #app 上添加 data-server-rendered="true" 特殊属性

main.js

import Vue from 'vue'
import App from './App.vue'
...
export function createApp() {
 // ...
 const app = new Vue({
 router,
 store,
 render: h => h(App)
 })
 return { app, router, store }
}

entry-server.js

import { createApp } from './main.js'
export default context => {
 // 因为有可能会是异步路由钩子函数或组件,所以我们将返回一个 Promise,
 // 以便服务器能够等待所有的内容在渲染前,
 // 就已经准备就绪。
 return new Promise((resolve, reject) => {
 const { app, router, store } = createApp()
 // 设置服务器端 router 的位置
 router.push(context.url)

 // 等到 router 将可能的异步组件和钩子函数解析完
 router.onReady(() => {
  const matchedComponents = router.getMatchedComponents()

  // 匹配不到的路由,执行 reject 函数,并返回 404
  if (!matchedComponents.length) {
  return reject({ code: 404 })
  }
  Promise.all(
  matchedComponents.map(component => {
   if (component.asyncData) {
   return component.asyncData({
    store,
    context,
    route: router.currentRoute
   })
   }
  })
  ).then(() => {
  // 在所有预取钩子(preFetch hook) resolve 后,
  // 我们的 store 现在已经填充入渲染应用程序所需的状态。
  // 当我们将状态附加到上下文,
  // 并且 `template` 选项用于 renderer 时,
  // 状态将自动序列化为 `window.__INITIAL_STATE__`,并注入 HTML。
  // 否则会导致客户端和服务端数据不统一造成渲染错误
  context.state = store.state
  resolve(app)
  }).catch(reject)
 }, reject)
 })
}

entry-client.js

import { createApp } from './main'
const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
 router.beforeResolve((to, from, next) => {
 const matched = router.getMatchedComponents(to)
 const prevMatched = router.getMatchedComponents(from)
 let diffed = false
 const activated = matched.filter((c, i) => {
  return diffed || (diffed = prevMatched[i] !== c)
 })

 if (!activated.length) {
  return next()
 }

 Promise.all(
  activated.map(component => {
  if (component.asyncData) {
   component.asyncData({
   store,
   route: to
   })
  }
  })
 )
  .then(() => {
  next()
  })
  .catch(next)
 })
 app.$mount('#app')
})

最后

完整代码参考 github地址

顺便贴上这张图

 vue ssr+koa2构建服务端渲染的示例代码

到此这篇关于vue ssr+koa2构建服务端渲染的示例代码的文章就介绍到这了,更多相关vue ssr koa2 服务端渲染内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 #Javascript
Vue-cli3多页面配置详解
Mar 22 #Javascript
redux处理异步action解决方案
Mar 22 #Javascript
JS+CSS实现3D切割轮播图
Mar 21 #Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
python搭建简易服务器分析与实现
2012/12/15 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python获取url的返回信息方法
2018/12/17 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
如何通过python实现人脸识别验证
2020/01/17 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
员工安全责任书范本
2014/07/24 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
virtualenv隔离Python环境的问题解析
2022/06/21 Python