追求极致的用户体验ssr(基于vue的服务端渲染)

首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见,我舍弃了ssr中的vuex和vue-router增加了redis,serverfetch等等实现了适合自己公司的业务,个人认为并不是所有的东西都值得吸收,对我来说我能用到的只是ssr将vue生成一个html和对应的js。

虾面我们来看看什么是服务端渲染?

官网给出的解释:

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。

ssr的服务端渲染大致的意思就是vue在客户端将标签渲染成的整个html片段的工作在服务端完成,服务端形成的html片段直接返回给客户端这个过程就叫做服务端渲染。

举个例子:

正常情况下我们使用vue或react框架浏览器获取所有资源后做的事情

1.浏览器加载所有资源(html,css,js,img...)-->2.cdn-->3.返回资源-->4.vue请求server获取业务数据-->5.返回数据渲染成html片段-->6.css渲染片段成一个网页-->用户

没错这里面最耗时的时间是4,5这两步骤,h5请求serverapi的过程本身除了服务器的限制,还有用户网络,宽带等等诸多限制,并且当页面逻辑过多,数据过于繁琐的情况下,我们的vue在client端渲染也会成为性能瓶颈,最明显的就是一些电商公司的首页,商品详情页等等。测试这个过程在优化前大概需要500ms左右,即使经过优化也需要200ms左右,这个时间几乎是难以接受的,并且我们在用户网络不是很好的情况下,如果我们serverfetch的过程需要500ms,再加上其他的各种请求资源,手机性能等等,用户就要看到将近一秒的白屏时间,这个明显是很差的用户体验。

ssr渲染

1.浏览器加载所有资源(html,css,js,img...)-->2.cdn-->3.返回资源-->4.css渲染片段成一个网页-->用户

这里我们不只是用ssr,我们也需要把所有的html片段缓存在node内存中,这个html片段一定只能放在内存中,不要想着要一小片redis内存和其他server端共用,因为并发亮极大的情况下出得流量有可能直接让redis挂掉。而这个性能放在node的内存中几乎可以忽略不计。我们如果需要存的时间很短的话,那么我们放在内存中并没有问题,因为实时数据刷新五秒可能就换一份内存数据,但是如果我们长时间去存这个备份可能就会出现数据不一致的问题,我们都知道一般线上部署node服务最少需要三台服务,而每一台的数据我们很难保证一只,用户a可能两个请求一个打到nodeA服务器上,另一个打到nodeB服务器上,这样就会出问题。这种内存只适合存那种时间很短的缓存,如果我们需要存几个小时那种我们还要考虑redis,因为我们需要数据实时同步,但是我们只能存储serverfetch的数据,而不能存整个html。一个ssr的时间大概是5ms左右,一台服务器的1s承受量就是1000/5*60% = 120个请求,也就是说我们三台服务器的请求并发量大概能承受360-400左右,超出就要红色预警了!!这对那些并发量极大的项目并不合适,所有我们中和考虑,这个无非就是时间换空间,空间换时间的游戏。我们可以选择增加缓存,也可以添加服务器!

上手有一定难度!!!

首先你需要熟悉webpack2,vue,vuex,vue-router(vue的全家桶),node,express。个别逻辑还需要redis等等后端资源,如果你想做到极致(并发情况下不穿透),我们还需要了解锁的概念,同时我们也需要知道如何处理避免死锁,事务等等机制!

用户体验优化,如何做到更快的让用户看到页面呢?

首先最开始考虑的就是模版渲染,我们知道我们在本地打开本地html文件的时候几乎是瞬间就能看到页面的所有内容,那么我们有可能让用户直接看到一个用户页面么?

首先我想到的就是node的各种渲染模版,ejs?jade?我们可以通过node server端去fetch我们后台的所有数据,之后把数据拼成一个html直接给用户,这样确实能实现我们想要的东西,但不是最好的,首先我们目前市面上的三大框架vue,react,angular我们需要摒弃,我们还要把所有的业务逻辑拆分,因为有了框架的限制,这些都是不现实的,并且我们直接用server端的模版对于我们前端开发来说效率也是极低。

不管是react还是vue都有基于自己框架的服务端渲染。

今天我们来说一下基于vue的ssr

ssr官网

https://ssr.vuejs.org/zh/

ssr的好处官网已经给出,最吸引我的只有两点

1.更好的 SEO

2.更快的内容到达时间(time-to-content)

基本上按照官网step by step都可以写一个很小的vuessr的demo一些基础细节我们不去介绍了。官网给出的ssr大概的流程

vue-router在ready之前fetch所有vue的业务数据调用asyncData钩子,之后获取的数据去更新vuex之后我们渲染vue组件的时候组件获取所有的vuex的store数据,拼接成一个html字符串。

首先我们的需要两份webpack打包入口,一份去压缩client,一份去压缩server。

client的一端是new一个vue的实例然后通过app.$mount(‘#app‘)将其挂载到 DOM

server的一端我们需要返回一个promise,我们可以在这里fetchpro的数据放在这个promise里面return,这里我们可以new一个promise,也可以使用fetch,或vue的axios。(注意我们所有需要在服务端渲染的数据都要在这里获取到,然后再client端也要获取到,我们所有的数据不能放在vue中的mounted中获取,因为这样和客户端渲染没什么区别,vue暴漏的这个环境支持window也就是说这个位置其实是client端做的,也就是在ssr所有功能实现之后在执行,这样我们和之前就没有任何区别了)

client,和server需要import你的vue所有组件,之后就会吧所有的vue组件渲染成你需要的html,这里官网给的例子需要你们去使用vue的全家桶,而我刚刚说的serverfetch就不需要使用vue-router和vuex,我们已经把所有需要的数据在ssr之前就直接放进vue中,通过props的形式传给组件

app.js

export function createApp (obj) {
    const app = new Vue({
      render: h => h(App.default, obj)
    })
	return { app }
}

  我们在client和server压缩入口就把所有内容传入组件,这样我们就可以实现把内容数据传到组件里面,实现vue的ssr

我的webpack:client

var webpack = require(‘webpack‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const VueSSRServerPlugin = require(‘vue-server-renderer/client-plugin‘)
const isProd = process.env.NODE_ENV === ‘production‘
console.log(‘NODE_ENV--->‘, process.env.NODE_ENV)
module.exports = {
    //页面入口文件配置
    entry: {
        index : ‘./build/index/entry-client.js‘
    },
    target: ‘web‘,
    devtool: isProd?false:‘#source-map‘,
    //入口文件输出配置
    output: {
        path: ‘dist/index‘,
        filename: ‘client_index_[hash].js‘,
      },
    module: {
      noParse: /es6-promise\.js$/, // avoid webpack shimming process
      rules: [
        {
        	test: /\.vue$/,
      	  loader: ‘vue-loader‘
        },
        {
          test: /\.js$/,
          loader: ‘babel-loader‘,
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: ‘url-loader‘,
          options: {
            limit: 10000,
            name: ‘[name].[ext]?[hash]‘
          }
        },
        {
          test: /\.css$/,
          use: [‘vue-style-loader‘, ‘css-loader‘]
        },
        {
          test: /\.es6$/,
          loader: "babel-loader",
          exclude: /node_modules/
        },
      ]
    },
    resolve: {
      alias: {
        ‘vue$‘: ‘vue/dist/vue.common.js‘,
      }
    },
    externals: {
      "jquery": "$",
      ‘Vue‘: true,
      ‘Swiper‘: true,
      ‘VueLazyload‘: true,
      ‘$‘: true
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //   compress: { warnings: isProd?false:true }
        // }),
        // new ExtractTextPlugin({
        //   filename: ‘common.[chunkhash].css‘
        // }),
        new webpack.DefinePlugin({
          ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘development‘),
          ‘process.env.VUE_ENV‘: ‘"server"‘
        }),
        new VueSSRServerPlugin()
    ]
};

  server:

var webpack = require(‘webpack‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const nodeExternals = require(‘webpack-node-externals‘)
const VueSSRServerPlugin = require(‘vue-server-renderer/server-plugin‘)
const isProd = process.env.NODE_ENV === ‘production‘
console.log(‘NODE_ENV--->‘, process.env.NODE_ENV)
module.exports = {
    //页面入口文件配置
    entry: {
        index : ‘./build/index/entry-server.js‘
    },
    target: ‘node‘,
    devtool: isProd?false:‘#source-map‘,
    //入口文件输出配置
    output: {
        path: ‘dist/index‘,
        filename: ‘server-bundle.js‘,
        libraryTarget: ‘commonjs2‘
      },
    module: {
      noParse: /es6-promise\.js$/, // avoid webpack shimming process
      rules: [
        {
          test: /\.vue$/,
        	loader: ‘vue-loader‘
        },
        {
          test: /\.js$/,
          loader: ‘babel-loader‘,
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: ‘url-loader‘,
          options: {
            limit: 10000,
            name: ‘[name].[ext]?[hash]‘
          }
        },
        {
          test: /\.css$/,
          use: [‘vue-style-loader‘, ‘css-loader‘]
        },
        {
          test: /\.es6$/,
          loader: "babel-loader",
          exclude: /node_modules/
        },
      ]
    },
    resolve: {
      // alias: {
      //   ‘vue$‘: ‘vue/dist/vue.js‘ // ‘vue/dist/vue.common.js‘ for webpack 1
      // }
    },
    externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
        whitelist: /\.css$/,
        "jquery": "$",
        ‘Vue‘: true,
        ‘Swiper‘: true,
        ‘VueLazyload‘: true,
        ‘$‘: true,
    }),
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //   compress: { warnings: isProd?false:true }
        // }),
        // new ExtractTextPlugin({
        //   filename: ‘common.[chunkhash].css‘
        // }),
        new webpack.DefinePlugin({
          ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘development‘),
          ‘process.env.VUE_ENV‘: ‘"server"‘
        }),
        new VueSSRServerPlugin()
    ]
};

  但是上面的形式我们需要每次访问页面都需要请求后台server的接口,这样的接口完全是没必要的,试想一下如果首页我们每秒都有500个请求,那么我们server端就先挡雨请求了1000次api,这样的消耗毫无疑问是过大的,那么我们需要怎么去做到接口的缓存呢?

  我们使用的node是express框架,然后在进入/index的时候我们去fetch后台server的数据,然后我们可以把数据传到client和server的config中,而不是每次在client,server中请求,然后我们每次内存缓存失效我们再去从新fetch后台server,这样我们假设每秒500个请求量,我们在node 端缓存5s,一共是2500个请求数量,我们在node其实只是请求了一次后台的server之后每次拿的node内存去返回用户html,这种效果很定是极好的,也极大的缓解了我们后台server的压力!

我做的公司首页迁移ssr效果:

43ms就获取了所有的数据,mobile端流量大概是电脑*10的时间,(其实4g状态下和电脑wifi也是不相上下的,几乎上下波动都在1m~2m左右),假设我们手机网速很一般,时间*10就是0.4s的时间,也就是说在用户首次访问过我们页面的情况下,只要手机中有缓存我们可以一最快的数据打开页面,即使用户在首次访问,我们的时间也可以控制在1s就能让用户看到大体的网页框架,而不是看了一秒的白屏!因为用户获取的其实就是node缓存的html,这个就跟在网上看一个html的专题页面没什么区别!我们节省的时间也就说我们client去请求接口的时间和框架渲染的时间,这个白屏的时间我们相当于缓存在了node中,既不占用内存,也能让用户有一个更高的用户体验。

时间: 2024-10-05 21:38:02

追求极致的用户体验ssr(基于vue的服务端渲染)的相关文章

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢?

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢? 项目你可以通过 easywebpack-cli 直接初始化即可完成或者clone egg-vue-webpack-boilerplate.下面说明一下从零如何搭建一个Egg + Webpack + Vue 的服务端渲染工程项目. 通过 egg-init 初始化 egg 项目 egg-init egg-vue-ssr // choose Simple egg app 安装 easywebpack-vue 和 egg

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

基于vue的nuxt框架cnode社区服务端渲染

nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue-router vuex nuxt axios simplemde ES6/7 stylus 目录结构 ├─npm-shrinkwrap.json ├─nuxt.config.js # nuxt配置文件 ├

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

vue服务端渲染 同构渲染

引言 自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术. 十年前,几乎所有网站都使用 ASP.Java.PHP 这类做后端渲染,但后来随着 jQuery.Angular.React.Vue 等 JS 框架的崛起,开始转向了前端渲染.2014年起又兴起了同构渲染,号称是未来,集成了前后端渲染的优点,当真如此? 我们先明确三个概念: 后端渲染:后端渲染指传统的 ASP.Java 或 PHP 的渲染

Vue 2.0 服务端渲染入门

1 什么是服务端渲染 SSR server side render 就是通过后端吐模板,而不是通过前端ajax获取数据,拼接字符串. 2 为什么需要SSR 需要SEO,因为爬虫不会等待ajax结果. 客户端网络慢,加载速度慢,影响用户体验. 3 另一种解决办法 预渲染 不是一次性下载整个单页应用,预渲染只是在构建时为了特定的路由生成特定的几个静态页面 你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染 4 NodeJS编写Vue的SSR 首先npm insta