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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue cli3适配所有端方案的实现
Apr 13 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
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
php 数据结构之链表队列
2017/10/17 PHP
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
精彩的推荐信范文
2013/11/26 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
给校长的建议书500字
2014/05/15 职场文书
质量月活动总结
2014/08/26 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers