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 相关文章推荐
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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程序--记数器
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
怎样让char类型的东西转换成int类型
2013/12/09 面试题
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
督导岗位职责
2015/02/04 职场文书
《风筝》教学反思
2016/02/23 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python