简单的Vue SSR的示例代码

前言

最近接手一个老项目，典型的 Vue 组件化前端渲染，后续业务优化可能会朝 SSR 方向走，因此，就先做些技术储备。如果对 Vue SSR 完全不了解，请先阅读官方文档。

思路

Vue 提供了一个官方 Demo，该 Demo 优点是功能大而全，缺点是对新手不友好，容易让人看蒙。因此，今天我们来写一个更加容易上手的 Demo。总共分三步走，循序渐进。

  1. 写一个简单的前端渲染 Demo（不包含 Ajax 数据）；
  2. 将前端渲染改成后端渲染（仍然不包含 Ajax 数据）；
  3. 在后端渲染的基础上，加上 Ajax 数据的处理；

第一步：前端渲染 Demo

这部分比较简单，就是一个页面中包含两个组件：Foo 和 Bar。

<!-- index.html -->
<body>
<div id="app">
 <app></app>
</div>
<script src="./dist/web.js"></script> <!--这是 app.js 打包出来的 JS 文件 -->
</body>
// app.js，也是 webpack 打包入口
import Vue from 'vue';
import App from './App.vue';
var app = new Vue({
 el: '#app',
 components: {
 App
 }
});

// App.vue
<template>
 <div>
 <foo></foo>
 <bar></bar>
 </div>
</template>
<script>
 import Foo from './components/Foo.vue';
 import Bar from './components/Bar.vue';
 export default {
 components:{
  Foo,
  Bar
 }
 }
</script>

// Foo.vue
<template>
 <div class='foo'>
 <h1>Foo</h1>
 <p>Component </p>
 </div>
</template>
<style>
 .foo{
 background: yellow;
 }
</style>

// Bar.vue
<template>
 <div class='bar'>
 <h1>Bar</h1>
 <p>Component </p>
 </div>
</template>
<style>
 .bar{
 background: blue;
 }
</style>

最终渲染结果如下图所示，源码请参考这里。

第二步：后端渲染（不包含 Ajax 数据）

第一步的 Demo 虽不包含任何 Ajax 数据，但即便如此，要把它改造成后端渲染，亦非易事。该从哪几个方面着手呢？

  1. 拆分 JS 入口；
  2. 拆分 Webpack 打包配置；
  3. 编写服务端渲染主体逻辑。

1. 拆分 JS 入口

在前端渲染的时候，只需要一个入口 app.js。现在要做后端渲染，就得有两个 JS 文件：entry-client.js 和 entry-server.js 分别作为浏览器和服务器的入口。

先看 entry-client.js，它跟第一步的 app.js 有什么区别吗？ → 没有区别，只是换了个名字而已，内容都一样。

再看 entry-server.js，它只需返回 App.vue 的实例。

// entry-server.js
export default function createApp() {
 const app = new Vue({
 render: h => h(App)
 });
 return app;
};

entry-server.js 与 entry-client.js 这两个入口主要区别如下：

  1. entry-client.js 在浏览器端执行，所以需要指定 el 并且显式调用 $mount 方法，以启动浏览器的渲染。
  2. entry-server.js 在服务端被调用，因此需要导出为一个函数。

2. 拆分 Webpack 打包配置

在第一步中，由于只有 app.js 一个入口，只需要一份 Webpack 配置文件。现在有两个入口了，自然就需要两份 Webpack 配置文件：webpack.server.conf.js 和 webpack.client.conf.js，它们的公共部分抽象成 webpack.base.conf.js。

关于 webpack.server.conf.js，有两个注意点：

  1. libraryTarget: 'commonjs2' → 因为服务器是 Node，所以必须按照 commonjs 规范打包才能被服务器调用。
  2. target: 'node' → 指定 Node 环境，避免非 Node 环境特定 API 报错，如 document 等。

3. 编写服务端渲染主体逻辑

Vue SSR 依赖于包 vue-server-render，它的调用支持两种入口格式：createRenderer 和 createBundleRenderer，前者以 Vue 组件为入口，后者以打包后的 JS 文件为入口，本文采取后者。

// server.js 服务端渲染主体逻辑
// dist/server.js 就是以 entry-server.js 为入口打包出来的 JS
const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {
 template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8')
});

server.get('/index', (req, res) => {
 renderer.renderToString((err, html) => {
 if (err) {
  console.error(err);
  res.status(500).end('服务器内部错误');
  return;
 }
 res.end(html);
 })
});

server.listen(8002, () => {
 console.log('后端渲染服务器启动，端口号为：8002');
});

这一步的最终渲染效果如下图所示，从图中我们可以看到，组件已经被后端成功渲染了。源码请参考这里。

第三步：后端渲染（预获取 Ajax 数据）

这是关键的一步，也是最难的一步。

假如第二步的组件各自都需要请求 Ajax 数据的话，该怎么处理呢？官方文档给我们指出了思路，我简要概括如下：

  1. 在开始渲染之前，预先获取所有需要的 Ajax 数据（然后存在 Vuex 的 Store 中）；
  2. 后端渲染的时候，通过 Vuex 将获取到的 Ajax 数据分别注入到各个组件中；
  3. 把全部 Ajax 数据埋在 window.INITIAL_STATE 中，通过 HTML 传递到浏览器端；
  4. 浏览器端通过 Vuex 将 window.INITIAL_STATE 里面的 Ajax 数据分别注入到各个组件中。

下面谈几个重点。

我们知道，在常规的 Vue 前端渲染中，组件请求 Ajax 一般是这么写的：“在 mounted 中调用 this.fetchData，然后在回调里面把返回数据写到实例的 data 中，这就 ok 了。”

在 SSR 中，这是不行的，因为服务器并不会执行 mounted 周期。那么我们是否可以把 this.fetchData

提前到 created 或者 beforeCreate 这两个生命周期中执行？同样不行。原因是：this.fetchData 是异步请求，请求发出去之后，没等数据返回呢，后端就已经渲染完了，无法把 Ajax 返回的数据也一并渲染出来。

所以，我们得提前知道都有哪些组件有 Ajax 请求，等把这些 Ajax 请求都返回了数据之后，才开始组件的渲染。

// store.js
function fetchBar() {
 return new Promise(function (resolve, reject) {
 resolve('bar ajax 返回数据');
 });
}

export default function createStore() {
 return new Vuex.Store({
 state: {
  bar: '',
 },
 actions: {
  fetchBar({commit}) {
  return fetchBar().then(msg => {
   commit('setBar', {msg})
  })
  }
 },
 mutations:{
  setBar(state, {msg}) {
  Vue.set(state, 'bar', msg);
  }
 }
 })
}

// Bar.uve
asyncData({store}) {
 return store.dispatch('fetchBar');
},
computed: {
 bar() {
 return this.$store.state.bar;
 }
}

组件的 asyncData 方法已经定义好了，但是怎么索引到这个 asyncData 方法呢？先看我的根组件 App.vue 是怎么写的。

// App.vue
<template>
 <div>
 <h1>App.vue</h1>
 <p>vue with vue </p>
 <hr>
 <foo1 ref="foo_ref"></foo1>
 <bar1 ref="bar_ref"></bar1>
 <bar2 ref="bar_ref2"></bar2>
 </div>
</template>
<script>
 import Foo from './components/Foo.vue';
 import Bar from './components/Bar.vue';

 export default {
 components: {
  foo1: Foo,
  bar1: Bar,
  bar2: Bar
 }
 }
</script>

从根组件 App.vue 我们可以看到，只需要解析其 components 字段，便能依次找到各个组件的 asyncData 方法了。

// entry-server.js
export default function (context) {
 // context 是 vue-server-render 注入的参数
 const store = createStore();
 let app = new Vue({
 store,
 render: h => h(App)
 });

 // 找到所有 asyncData 方法
 let components = App.components;
 let prefetchFns = [];
 for (let key in components) {
 if (!components.hasOwnProperty(key)) continue;
 let component = components[key];
 if(component.asyncData) {
  prefetchFns.push(component.asyncData({
  store
  }))
 }
 }

 return Promise.all(prefetchFns).then((res) => {
 // 在所有组件的 Ajax 都返回之后，才最终返回 app 进行渲染
 context.state = store.state;
 // context.state 赋值成什么，window.__INITIAL_STATE__ 就是什么
 return app;
 });
};

还有几个问题比较有意思：

1、是否必须使用 vue-router？→ 不是。虽然官方给出的 Demo 里面用到了 vue-router，那只不过是因为官方 Demo 是包含多个页面的 SPA 罢了。一般情况下，是需要用 vue-router 的，因为不同路由对应不同的组件，并非每次都把所有组件的 asyncData 都执行的。但是有例外，比如我的这个老项目，就只有一个页面（一个页面中包含很多的组件），所以根本不需要用到 vue-router，也照样能做 SSR。主要的区别就是如何找到那些该被执行的 asyncData 方法：官方 Demo 通过 vue-router，而我通过直接解析 components 字段，仅此而已。

2、是否必须使用 Vuex？ → 是，但也不是，请看尤大的回答。为什么必须要有类似 Vuex 的存在？我们来分析一下。

2.1. 当预先获取到的 Ajax 数据返回之后，Vue 组件还没开始渲染。所以，我们得把 Ajax 先存在某个地方。

2.2. 当 Vue 组件开始渲染的时候，还得把 Ajax 数据拿出来，正确地传递到各个组件中。

2.3. 在浏览器渲染的时候，需要正确解析 window.INITIAL_STATE ，并传递给各个组件。

因此，我们得有这么一个独立于视图以外的地方，用来存储、管理和传递数据，这就是 Vuex 存在的理由。

3、后端已经把 Ajax 数据转化为 HTML 了，为什么还需要把 Ajax 数据通过 window.INITIAL_STATE 传递到前端？ → 因为前端渲染的时候仍然需要知道这些数据。举个例子，你写了一个组件，给它绑定了一个点击事件，点击的时候打印出 this.msg 字段值。现在后端是把组件 HTML 渲染出来了，但是事件的绑定肯定得由浏览器来完成啊，如果浏览器拿不到跟服务器端同样的数据的话，在触发组件的点击事件的时候，又上哪儿去找 msg 字段呢？

至此，我们已经完成了带 Ajax 数据的后端渲染了。这一步最为复杂，也最为关键，需要反复思考和尝试。具体渲染效果图如下所示，源码请参考这里。

效果

大功告成了吗？还没。人们都说 SSR 能提升首屏渲染速度，下面我们对比一下看看到底是不是真的。（同样在 Fast 3G 网络条件下）。

官方思路的变形

行文至此，关于 Vue SSR Demo便已经结束了。后面是我结合自身项目特点的一些变形，不感兴趣的读者可以不看。

第三步官方思路有什么缺点吗？我认为是有的：对老项目来说，改造成本比较大。需要显式的引入 vuex，就得走 action、mutations 那一套，无论是代码改动量还是新人学习成本，都不低。

有什么办法能减少对旧有前端渲染项目的改动量的吗？我是这么做的。

// store.js
// action，mutations 那些都不需要了，只定义一个空 state
export default function createStore() {
 return new Vuex.Store({
 state: {}
 })
}
// Bar.vue
// tagName 是组件实例的名字，比如 bar1、bar2、foo1 等，由 entry-server.js 注入
export default {
 prefetchData: function (tagName) {
 return new Promise((resolve, reject) => {
  resolve({
  tagName,
  data: 'Bar ajax 数据'
  });
 })
 }
}
// entry-server.js
return Promise.all(prefetchFns).then((res) => {
 // 拿到 Ajax 数据之后，手动将数据写入 state，不通过 action，mutation 那一套
 // state 内部区分的 key 值就是 tagName，比如 bar1、bar2、foo1 等
 res.forEach((item, key) => {
 Vue.set(store.state, `${item.tagName}`, item.data);
 });
 context.state = store.state;
 return app;
});
// ssrmixin.js
// 将每个组件都需要的 computed 抽象成一个 mixin，然后注入
export default {
 computed: {
 prefetchData () {
  let componentTag = this.$options._componentTag; // bar1、bar2、foo1
  return this.$store.state[componentTag];
 }
 }
}

至此，我们就便得到了 Vue SSR 的一种变形。对于组件开发者而言，只需要把原来的 this.fetchData 方法抽象到 prefetchData 方法，然后就可以在 DOM 中使用 {{prefetchData}} 拿到到数据了。这部分的代码请参考这里。

总结

Vue SSR 确实是个有趣的东西，关键在于灵活运用。此 Demo 还有一个遗留问题没有解决：当把 Ajax 抽象到 prefetchData，做成 SSR 之后，原先的前端渲染就失效了。能不能同一份代码同时支持前端渲染和后端渲染呢？这样当后端渲染出问题的时候，我就可以随时切回前端渲染，便有了兜底的方案。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • 基于vue-ssr服务端渲染入门详解

    基于vue-ssr服务端渲染入门详解

    第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣 服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • 详解vue服务端渲染(SSR)初探

    详解vue服务端渲染(SSR)初探

    前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

  • Vue SSR 组件加载问题

    Vue SSR 组件加载问题

    Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return

  • 加载 vue 远程代码的组件实例详解

    在我们的 vue 项目中(特别是后台系统),总会出现一些需要多业务线共同开发同一个项目的场景,如果各业务团队向框架中提供一些私有的展示组件,但是这些组件并不能和框架一起打包,因为框架不能因为某个私有模块的频繁变更而重复构建发布.在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中. vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能.我们本次的异步远端组件将基于 vue-cli 开发. 需求分析 如

  • 简单的Vue SSR的示例代码

    前言 最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备.如果对 Vue SSR 完全不了解,请先阅读官方文档. 思路 Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙.因此,今天我们来写一个更加容易上手的 Demo.总共分三步走,循序渐进. 写一个简单的前端渲染 Demo(不包含 Ajax 数据): 将前端渲染改成后端渲染(仍然不包含 Ajax 数据): 在后端渲染的基础上,加上 A

  • Python连接mysql数据库及简单增删改查操作示例代码

    1.安装pymysql 进入cmd,输入 pip install pymysql: 2.数据库建表 在数据库中,建立一个简单的表,如图: 3.简单操作 3.1查询操作 #coding=utf-8 #连接数据库测试 import pymysql #打开数据库 db = pymysql.connect(host="localhost",user="root",password="root",db="test") #使用cursor

  • springboot简单实现单点登录的示例代码

    springboot简单实现单点登录的示例代码

    什么是单点登录就不用再说了,今天通过自定义sessionId来实现它,想了解的可以参考https://www.xuxueli.com/xxl-sso/ 讲一下大概的实现思路吧:这里有一个认证中心,两个单独的服务.每个服务去请求的 时候都要经过一个过滤器,首先判断该请求地址中有没有sessionid,有的话则写入cookie ,如果请求地址中没有sessionid那么从cookie中去获取,如果cookie中获取到了则证明登录了,放行即可.否则跳转到认证中心,此时把请求地址当做参数带到认证中,认证

  • C++实现一个简单的线程池的示例代码

    C++实现一个简单的线程池的示例代码

    目录 一.设计 二.参数选择 三.类设计 一.设计 线程池应该包括 保存线程的容器,保存任务的容器. 为了能保证避免线程对任务的竞态获取,需要对任务队列进行加锁. 为了使得工作线程感知任务的到来,需要使用条件变量来唤醒工作线程. 任务容器中的任务管理. 任务的处理API. 二.参数选择 使用数组存放线程,链表存放任务. 三.类设计 线程池类 template<typename T> class threadpool { public: threadpool(int thread_num,int

  • 基于React Context实现一个简单的状态管理的示例代码

    基于React Context实现一个简单的状态管理的示例代码

    目录 前言 封装一个父组件用来包裹其他子组件 子组件如何获取数据呢 class Component 方式 context.Consumer useContext 总结 参考 前言 在大多数情况下,我们开发项目都需要一个状态管理,方便我们在全局共享状态库,在React生态里比较流行的几个库 redux.mobx.recoil 但是对于小项目,我们完全可以自己封装一个状态管理,减少一个包的安装就可以减小打包以后的项目体积. 主要分两步: 封装一个顶层组件提供数据 子组件获取数据和更新数据 封装一个父

  • 用vue的双向绑定简单实现一个todo-list的示例代码

    用vue的双向绑定简单实现一个todo-list的示例代码

    前言 最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理.数据劫持.模板解析.变异数组方法.双向绑定有了更深的理解.于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成对深度复杂对象的双向绑定以及对数组的监听,加深了对vue基本原理的印象. github地址:todo-list 学习链接 前排感谢以下文章,对我理解vue的基本原理有很大的帮助! 剖析vue实现原理,自己动手实现mvvm by DMQ 对vue早期

  • Django 博客实现简单的全文搜索的示例代码

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成.现在我们来为我们的博客提供一个简单的搜索功能. 概述 博客文章通常包含标题和正文两个部分.当用户输入某个关键词进行搜索后,我们希望为用户显示标题和正文中含有被搜索关键词的全部文章.整个搜索的过程如下: 用户在搜素框中输入搜索关键词,假设为 "django",

  • Laravel 如何在blade文件中使用Vue组件的示例代码

    Laravel 如何在blade文件中使用Vue组件,具体代码详情请看下文: 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan ui react 系统还提供了非常便捷的auth脚手架,带登录注册. php artisan ui react --auth 3.组件位置 Vue组件ExampleComponent.vue将被放置在resources/js/components目录中.ExampleCompo

  • 利用python实现简单的循环购物车功能示例代码

    本文主要给大家介绍了关于python实现循环购物车功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 示例代码 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s", 5000), ("book python", 81), ("iwach", 3200), ("电视机", 2200) ] def zero(name):

  • nuxt+axios解决前后端分离SSR的示例代码

    nuxt+axios解决前后端分离SSR的示例代码

    ​背景:由于后端程序猿通常对CSS .JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样式错乱的问题,并且要迎合上级一天三遍样式需求,因此决定用前后端分离.考虑到网站的推广,又必须做SEO.前端框架选择VUE,解决SSR顺便选择了nuxt.js,此为背景. 一.准备工作 1.安装nodejs 2.安装vuejs 3.安装vue-cli 4.安装nuxt 二.创建nuxt项目并配置 找一个自己喜欢的目录,作为你的worksp

随机推荐