理解vue ssr原理并自己搭建简单的ssr框架

前言

大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口。Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端。另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验。

引入

Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的。所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务端渲染的优点

  • 更好的SEO,搜索引擎爬虫可以抓取渲染好的页面
  • 更快的内容到达时间(首屏加载更快),因为服务端只需要返回渲染好的HTML,这部分代码量很小的,所以用户体验更好

服务端渲染的缺点

  • 首先就是开发成本比较高,比如某些声明周期钩子函数(如beforeCreate、created)能同时运行在服务端和客户端,因此第三方库要做特殊处理,才能在服务器渲染应用程序中运行。
  • 由于服务端渲染要用Nodejs做中间层,所以部署项目时,需要处于Node.js server运行环境。在高流量环境下,还要做好服务器负载和缓存策略

原理解析

先附上demo地址:https://github.com/wmui/vue-ssr-demo

第一步:编写entry-client.js和entry-server.js

entry-client.js只在浏览器环境下执行,所以需要显示调用$mount方法,挂载DOM节点

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

function createApp() {
 const store = createStore();
 const app = new Vue({
   store,
   render: h => h(App)
 });
 return {app, store}
}

const { app, store } = createApp();

// 使用window.__INITIAL_STATE__中的数据替换整个state中的数据,这样服务端渲染结束后,客户端也可以自由操作state中的数据
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__);
}

app.$mount('#app');

entry-server.js需要导出一个函数,在服务端渲染期间会被调用

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

export default function(context) {
 // context是上下文对象
 const store = createStore();
 let app = new Vue({
  store,
  render: h => h(App)
 });

 // 找到所有 asyncData 方法
 let components = App.components;
 let asyncDataArr = []; // promise集合
 for (let key in components) {
  if (!components.hasOwnProperty(key)) continue;
  let component = components[key];
  if (component.asyncData) {
   asyncDataArr.push(component.asyncData({store})) // 把store传给asyncData
  }
 }
 // 所有请求并行执行
 return Promise.all(asyncDataArr).then(() => {
  // context.state 赋值成什么,window.__INITIAL_STATE__ 就是什么
  // 这下你应该明白entry-client.js中window.__INITIAL_STATE__是哪来的了,它是在服务端渲染期间被添加进上下文的
  context.state = store.state;
  return app;
 });
};

上面的asyncData是干嘛用的?其实,这个函数是专门请求数据用的,你可能会问请求数据为什么不在beforeCreate或者created中完成,还要专门定义一个函数?虽然beforeCreatecreated在服务端也会被执行(其他周期函数只会在客户端执行),但是我们都知道请求是异步的,这就导致请求发出后,数据还没返回,渲染就已经结束了,所以无法把 Ajax 返回的数据也一并渲染出来。因此需要想个办法,等到所有数据都返回后再渲染组件

asyncData需要返回一个promise,这样就可以等到所有请求都完成后再渲染组件。下面是在foo组价中使用asyncData的示例,在这里完成数据的请求

export default {
 asyncData: function({store}) {
  return store.dispatch('GET_ARTICLE') // 返回promise
 },
 computed: {
  article() {
   return this.$store.state.article
  }
 }
}

第二步:配置webpack

webpack配置比较简单,但是也需要针对client和server端单独配置

webpack.client.conf.js显然是用来打包客户端应用的

module.exports = merge(base, {
 entry: {
  client: path.join(__dirname, '../entry-client.js')
 }
});

webpack.server.conf.js用来打包服务端应用,这里需要指定node环境

module.exports = merge(base, {
 target: 'node', // 指定是node环境
 entry: {
  server: path.join(__dirname, '../entry-server.js')
 },
 output: {
  filename: '[name].js', // server.js
  libraryTarget: 'commonjs2' // 必须按照 commonjs规范打包才能被服务器调用。
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: path.join(__dirname, '../index.ssr.html'),
   filename: 'index.ssr.html',
   files: {
    js: 'client.js'
   }, // client.js需要在html中引入
   excludeChunks: ['server'] // server.js只在服务端执行,所以不能打包到html中
  })
 ]
});

第三步:启动服务

打包完成后就可以启动服务了,在start.js中我们需要把server.js加载进来,然后通过renderToString方法把渲染好的html返回给浏览器

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('*', (req, res) => {
 renderer.renderToString((err, html) => {
  // console.log(html)
  if (err) {
   console.error(err);
   res.status(500).end('服务器内部错误');
   return;
  }
  res.end(html);
 })
});

效果图

demo已经上传到github:https://github.com/wmui/vue-ssr-demo

结语

个人实践Vue SSR已有一段时间,发现要想搭建一套完整的 SSR 服务框架还是很有挑战的,或许 Nuxt 是一个不错的选择,对 Nuxt 感兴趣的朋友可以参考我的一个开源小作品Essay

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

(0)

相关推荐

  • 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

  • 最后说说Vue2 SSR 的 Cookies 问题

    本来想前面写点什么的, 还是算了, 直接说思路吧. 从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext 之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路 因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 a

  • vue ssr 指南详读

    本帖说明 该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现.由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流. 介绍 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"

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

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

  • Vue基于NUXT的SSR详解

    本文介绍了Vue基于NUXT的SSR,分享给大家,也给自己留个笔记. SSR 首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 <!DOCTYPE html> <ht

  • 通过vue-cli3构建一个SSR应用程序的方法

    1.前沿 1.1.什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示. 1.2.客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js.css等等资源文件.然后塞到index.html中 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->

  • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

    引言 Memory Leak 是最难排查调试的 Bug 种类之一,因为内存泄漏是个 undecidable problem,只有开发者才能明确一块内存是不是需要被回收.再加上内存泄漏也没有特定的报错信息,只能通过一定时间段的日志来判断是否存在内存泄漏.大家熟悉的常用调试工具对排查内存泄漏也没有用武之地.当然了,除了专门用于排查内存泄漏的工具(抓取Heap之类的工具)之外. 对于不同的语言,各种排查内存泄漏的方式方法也不尽相同.对于 JavaScript 来说,针对不同的平台,调试工具也是不一样的

  • 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-ssr服务端渲染入门详解

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

  • 简单的Vue SSR的示例代码

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

随机推荐