转载:原文链接https://www.86886.wang/detail/5b8e6081f03d630ba8725892,谢谢作者的分享

前言

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

引入

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

服务端渲染的优点

  1. 更好的SEO,搜索引擎爬虫可以抓取渲染好的页面

  2. 更快的内容到达时间(首屏加载更快),因为服务端只需要返回渲染好的HTML,这部分代码量很小的,所以用户体验更好

服务端渲染的缺点

  1. 首先就是开发成本比较高,比如某些声明周期钩子函数(如beforeCreate、created)能同时运行在服务端和客户端,因此第三方库要做特殊处理,才能在服务器渲染应用程序中运行。

  2. 由于服务端渲染要用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: http://github.com/wmui/vue-ssr-demo

转载一篇好理解的vue ssr文章的更多相关文章

  1. 上一篇括号配对让人联想起catalan数,顺便转载一篇归纳的还不错的文章

    转载请注明来自souldak,微博:@evagle 怎么样才是合法的组合? 只要每一时刻保证左括号的数目>=右括号的数目即可. 直接递归就行,每次递归加一个括号,左括号只要还有就能加,右括号要保 ...

  2. 转载一篇关于unicode字符编码的文章

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们认为8个开关状态作为原子单位很好,于是他们把这称为"字节". 再后来,他们又做了一 ...

  3. 转载一篇关于ios静态库的文章

    http://blog.csdn.net/zsomsom/article/details/9163635

  4. 理解vue ssr原理,自己搭建简单的ssr框架

    前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些 ...

  5. 【转】java提高篇(二)-----理解java的三大特性之继承

    [转]java提高篇(二)-----理解java的三大特性之继承 原文地址:http://www.cnblogs.com/chenssy/p/3354884.html 在<Think in ja ...

  6. Vue SSR的渲染性能

    一.前言 前端技术年年有新宠,Vue.js 2.0以其轻量级.渐进式.简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐. 为了提高首屏渲染速度 缓存+直出 是必不可少的.在Vue 1× 时代 ...

  7. Vue SSR不可不知的问题

    Vue SSR不可不知的问题 本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. ssr的应用场景 1.SEO需求 SE ...

  8. Java提高篇之理解java的三大特性——继承

    在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...

  9. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目

    前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...

随机推荐

  1. docker WARNING: IPv4 forwarding is disabled 问题解决

    问题: [yuyongxr@localhost ~]$sudo docker run -d --name nginx -p : nginx WARNING: IPv4 forwarding is di ...

  2. 关于表单元素的name及HTML中的id

    这种在上高级WEB课时,老师为表单元素赋了name值,之后直接在JS中使用该值而不需要使用document.get...来获取了,例: <!DOCTYPE html> <html&g ...

  3. OI用语一览表

    术语 含义 A/AC 通过 AAA树 Top-tree ABC AtCoder Beginner Contest AFO 退役 AG 银牌 AGC AtCoder Grand Contest AK 通 ...

  4. PS调出清新风格社区街拍照片

    原图: 首先呢,我们还是先看一下在直方图,但是呢,你会发现,这张照片的直方图毫无特色. 简直是标准得不能再标准的直方图了.所以各位那我们就跳过这步吧.你要真跳过这步你就完了.直方图还有三个儿子啊,通道 ...

  5. iOS WebView 加载本地资源(图片,文件等)

    https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...

  6. $router和$route的区别

    在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转,所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名'), 在写的时候 ...

  7. Python——逻辑运算(or,and)

    print(0 and 2 > 1) #结果0 print(0 and 2 < 1) #结果0 print(1 and 2 > 1) #结果True print(1 and 2 &l ...

  8. Java BitSet使用场景和示例

    一.什么是BitSet? 注:以下内容来自JDK API: BitSet类实现了一个按需增长的位向量.位Set的每一个组件都有一个boolean值.用非负的整数将BitSet的位编入索引.可以对每个编 ...

  9. jsp篇 之 jsp页面中的路径问题

    jsp页面中的路径问题: 一般情况下,jsp中路径问题是和我们之前在servlet中讨论的html里面的路径问题是一 样的,但是在[jsp中可以动态获得该项目的url]. 如果在jsp页面的上面写了这 ...

  10. ☆ [POI2007] ZAP-Queries 「莫比乌斯反演」

    题目类型:莫比乌斯反演 传送门:>Here< 题意:求有多少对正整数对\((a,b)\),满足\(0<a<A\),\(0<b<B\),\(gcd(a,b)=d\) ...