首发于大转转FE
SSR同构降级策略

SSR同构降级策略

SSR同构降级策略

1、相关概念

  • CSR:客户端渲染(Client Side Render)。渲染过程全部交给浏览器进行处理,服务器不参与任何渲染。页面初始加载的HTML文档中无内容,需要下载执行JS文件,由浏览器动态生成页面,并通过JS进行页面交互事件与状态管理。
  • SSR:服务端渲染(Server Side Render)。DOM树在服务端生成后返回给前端。即当前页面的内容是服务器生成好,返回给浏览器进行渲染的。
  • 同构:客户端渲染和服务器端渲染的结合,在服务器端执行一次,用于实现服务器端渲染(首屏直出),在客户端再执行一次,用于接管页面交互(绑定事件),核心解决SEO和首屏渲染慢的问题。采用同构思想的框架:Nuxt.js(基于Vue)、Next.js(基于React)。

2、ssr(服务端渲染)技术实现方案

  • 使用next.js/nuxt.js的服务端渲染方案
  • 使用node+vue-server-renderer实现vue项目的服务端渲染
  • 使用node+React renderToStaticMarkup/renderToString实现react项目的服务端渲染
  • 使用模板引擎来实现ssr(比如ejs, jade, pug等)

我所在的部门采用基于vue的Nuxt框架来实现ssr同构渲染,但是Nuxt并未提供相应的降级策略,当node服务端请求出现偶发性错误(非接口服务挂掉),本来应该在首屏渲染的模块会因无数据而显示空白,并没有在客户端激活过程中尝试再次请求接口;双十一等高流量情况下,出现人肉“运维”的无奈,想象一下其他小伙伴陪着对象,吃着火锅、唱着歌,你确在电脑前抱着忐忑不安的心情盯着监控系统....我们需要一个降级方案以备不时之需。

3、vue-ssr实现流程

在我们开始降级方案之前,我们必须先对ssr的原理有一定的认知。接下来我们以vue(同理)为例:

如上图所示有两个入口文件Server entry和Client entry,分别经webpack打包成服务端用的Server Bundle和客户端用的Client Bundle。 服务端:当Node Server收到来自客户端的请求后, BundleRenderer 会读取Server Bundle,并且执行它,而 Server Bundle实现了数据预取并将填充数据的Vue实例挂载在HTML模版上,接下来BundleRenderer将HTML 渲染为字符串,最后将完整的HTML返回给客户端。 客户端:浏览器收到HTML后,客户端加载了Client Bundle,通过app.$mount('#app')的方式将Vue实例挂载在服务端返回的静态HTML上。如:

<div id="app" data-server-rendered="true">

data-server-rendered 特殊属性,让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的,并且应该以激活模式(Hydration:ssr.vuejs.org/zh/hydrat)进行挂载。

4、性能优化

降级的目的是为了预防服务负载过高或挂掉,那么在这之前,也可以通过代码实现来做一定的优化,下面简单介绍下几种常规优化方法

  • 减少服务端渲染DOM数
  1. 当页面特别长的时候,譬如我们的常见的首页、商品详情页,底部会有推荐商品流、评价、商品介绍等并不会出现在首屏的模块,也不需要在服务端的时候执行渲染,这个时候可以结合vue的插槽系统、内置component组件的is,利用vue ssr服务端只会执行beforeCreate和created生命周期的特性,封装自定义组件,被该组件在mounted的时候将包裹的组件挂载到component组件的is属性上;
  2. 通过vue高级异步组件封装延迟加载方法,只有当模块到达指定可视区域时再加载;
function asyncComponent({componentFactory, loading = 'div', loadingData = 'loading', errorComponent, rootMargin = '0px',retry= 2}) {
  let resolveComponent;
  return () => ({
    component: new Promise(resolve => resolveComponent = resolve),
    loading: {
      mounted() {
        const observer = new IntersectionObserver(([entries]) => {
          if (!entries.isIntersecting) return;
          observer.unobserve(this.$el);

          let p = Promise.reject();
          for (let i = 0; i < retry; i++) {
            p = p.catch(componentFactory);
          }
          p.then(resolveComponent).catch(e => console.error(e));
        }, {
          root: null,
          rootMargin,
          threshold: [0]
        });
        observer.observe(this.$el);
      },
      render(h) {
        return h(loading, loadingData);
      },
    },
    error: errorComponent,
    delay: 200
  });
}

export default {
  install: (Vue, option) => {
    Vue.prototype.$loadComponent = componentFactory => {
      return asyncComponent(Object.assign(option, {
        componentFactory
      }))
    }
  }
}
  • 开启多进程

Node.js 是单进程,单线程模型,其基于事件驱动、异步非阻塞模式,可以应用于高并发场景,避免了线程创建、线程之间上下文切换所产生的资源开销。但是遇到大量计算,CPU 耗时的操作,则无法通过开启线程利用 CPU 多核资源,但是可以通过开启多进程的方式,来利用服务器的多核资源。

  1. 单个 Node.js 实例运行在单个线程中。 为了充分利用多核系统,有时需要启用一组 Node.js 进程去处理负载任务,cluster 管理多进程的方式为 主-从 模式,master 进程负责开启、调度 worker 进程,worker 进程负责处理请求和其他逻辑。
const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`主进程 ${process.pid} 正在运行`);

  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`工作进程 ${worker.process.pid} 已退出`);
  });
} else {
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Hello, Bug Star');
  }).listen(8000);

  console.log(`工作进程 ${process.pid} 已启动`);
}
  1. 生产环境一般采用pm2来维护node项目

如果控制各进程之间的通信,让每个进程分别处理自己的逻辑,采用编写node脚本的方式启动cluster,从健壮性的角度上讲pm2的方式要好一些。

  • 开启缓存
  1. 页面级缓存:在创建 render 实例时利用LRU-Cache来缓存当前请求的资源。
  2. 组件级缓存:可缓存组件必须定义一个唯一的 name 选项。通过使用唯一的名称,每个缓存键 (cache key) 对应一个组件。如果 renderer 在组件渲染过程中进行缓存命中,那么它将直接重新使用整个子树的缓存结果。
  3. 分布式缓存:SSR应用程序部署在多服务、多进程下,进程下的缓存并不是共享的,造成缓存命中效率低下,可以采用如Redis,用以实现多进程间对缓存的共享

5、项目降级改造

业务逻辑的迁移,以及各种MV*框架的服务端渲染模型的出现,让基于Node的前端SSR策略更依赖服务器性能。首屏直出性能以及Node服务的稳定性,直接关系影响着用户体验。 Node作为服务端语言,相比于Java和PHP这种老服务端语言来说,对于整体性能的调控还是不够完善。虽然有sentry这种报警平台来及时通知发生的错误,但是也要考虑实现相应的容灾方案,不然怎么放心将大流量交给它。 那么要实现SSR的降级为CSR,可以理解为需要打包出2份html,一份用来给服务端渲染插件createBundleRenderer当作模版传入输出渲染好的html片段,另外一份是作为客户端渲染的静态模版使用,当服务端渲染失败或者触发降级操作时,客户端代码要重新执行组件的async方法来预取数据。

  • webpack.base.js在公共打包配置中,需要配置打包出的文件位置、使用到的 Loader 以及公共使用的 Plugin
// build/webpack.base.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  output: {
    filename: '[name].bundle.js', 
    path: resolve('../dist')
  },
  // 扩展名
  resolve: {
    extensions: ['.js', '.vue', '.css', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'] 
      },
      // .....
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

  • webpack.client.js
// build/webpack.client.js
const webpack = require('webpack')
const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const base = require('./webpack.base')
const isProd = process.env.NODE_ENV === 'production'
module.exports = merge(base, {
  entry: {
    client: resolve('../src/entry-client.js')
  },
  plugins: [
   new VueSSRClientPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.csr.html',
      template: resolve('../public/index.csr.html')
    })
  ]
})

  • webpack.server.js
// build/webpack.server.js
const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const base = require('./webpack.base')
module.exports = merge(base, {
  entry: {
    server: resolve('../src/entry-server.js')
  },
  target:'node',
  output:{
    libraryTarget:'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.ssr.html',
      template: resolve('../public/index.ssr.html'),
      minify: false,
      excludeChunks: ['server']
    })
  ]
})
  • server.js 部分代码

在该文件中,可以根据请求url参数、err异常错误、获取全局配置文件等方式,判断是否执行SSR的renderToString方法构建Html字符串,还是降级为CSR直接返回SPA Html。

const app = express()
const bundle = require('./dist/vue-ssr-server-bundle.json')
// 引入由 vue-server-renderer/client-plugin 生成的客户端构建 manifest 对象。此对象包含了 webpack 整个构建过程的信息,从而可以让 bundle renderer 自动推导需要在 HTML 模板中注入的内容。
const clientManifest = require('./dist/vue-ssr-client-manifest.json')

// 分别读取构建好的ssr和csr的模版文件
const ssrTemplate = fs.readFileSync(resolve('./dist/index.ssr.html'), 'utf-8')
const csrTemplate = fs.readFileSync(resolve('./dist/index.csr.html'), 'utf-8')
// 调用vue-server-renderer的createBundleRenderer方法创建渲染器,并设置HTML模板,之后将服务端预取的数据填充至模板中
function createRenderer (bundle, options) {
  return createBundleRenderer(bundle, Object.assign(options, {
    template: ssrTemplate,
   basedir: resolve('./dist'),
    runInNewContext: false
  }))
}

// vue-server-renderer创建bundle渲染器并绑定server bundle
let renderer = createRenderer(bundle, {
  clientManifest
})


// 相关中间件 压缩响应文件 处理静态资源等
app.use(...)
        
// 设置缓存时间
const microCache = LRU({
  maxAge: 1000 * 60 * 1
})

function render (req, res) {
  const s = Date.now()
  res.setHeader('Content-Type', 'text/html')
  // 缓存命中相关代码,略...
  
  // 设置请求的url
  const context = {
    title: '', 
    url: req.url,
  }
  if(/**与需要降级为ssr的相关 url参数、err异常错误、获取全局配置文件...条件*/){
     res.end(csrTemplate)
     return
  }
  // 将Vue实例渲染为字符串,传入上下文对象。
  renderer.renderToString(context, (err, html) => {
    if (err) {
      // 偶发性错误避免抛500错误  可以降级为csr的html文件
      //打日志操作.....
      res.end(csrTemplate)
      return
    }
    res.end(html)
    
  })
}
// 启动一个服务并监听8080端口
app.get('*', render)
const port = process.env.PORT || 8080
const server = http.createServer(app)
server.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})

  • entry.server.js
import { createApp } from './app'
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    const { url, req } = context
    const fullPath = router.resolve(url).route.fullPath
    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
 // 切换路由到请求的url
    router.push(url)
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        reject({ code: 404 })
      }
  // 执行匹配组件中的asyncData
      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute,
        req
      }))).then(() => {
        context.state = store.state
        if (router.currentRoute.meta) {
          context.title = router.currentRoute.meta.title
        }
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

  • entry-client.js
import 'es6-promise/auto'
import { createApp } from './app'
const { app, router, store } = createApp()
// 由于服务端渲染时,context.state 作为 window.__INITIAL_STATE__ 状态,自动嵌入到最终的 HTML 中。在客户端,在挂载到应用程序之前,state为window.__INITIAL_STATE__。
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)
    })
    const asyncDataHooks = activated.map(c => c.asyncData).filter(_ => _)
    if (!asyncDataHooks.length) {
      return next()
    }
    Promise.all(asyncDataHooks.map(hook => hook({ store, route: to })))
      .then(() => {
        next()
      })
      .catch(next)
  })
 // 挂载在DOM上
  app.$mount('#app')
})

6、降级策略

Node来进行数据持久化相关的工作,那么I/O和磁盘是主要瓶颈,Node作为前端ssr服务的话,CPU、内存、网络是主要瓶颈。 在 Node.js 中渲染基于vue/react完整的应用程序,大家不妨可以回顾一下,vue和react的渲染工作原理,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集)。

6.1 Node服务器监控触发降级

CPU指标

由于进程阻塞在CPU上的原因不相同,对于CPU密集型任务来说,CPU利用率可以很好地表示当前CPU的工作情况,但是对于I/O密集型的任务来说,CPU空闲不代表CPU无事可做,可能是任务被挂起,去进行其他操作了。对于进行SSR的Node系统来说,渲染基本上可以理解为CPU密集型业务,所以这个指标在一定程度上可以体现出当前业务环境的CPU性能。

内存指标

内存是一个非常容易量化的指标。 内存占用率是评判一个系统的内存瓶颈的常见指标。 在 V8 中,所有的 JavaScript 对象都是通过堆来进行分配的。对于process.memoryUsage()拿到的值的定义:

  • heapTotalheapUsed 代表 V8 的内存使用情况。
  • external 代表 V8 管理的,绑定到 Javascript 的 C++ 对象的内存使用情况。
  • rss 是驻留集大小, 是给这个进程分配了多少物理内存(占总分配内存的一部分),包含所有的 C++ 和 JavaScript 对象与代码。使用 Worker 线程时, rss 将会是一个对整个进程有效的值,而其他字段只指向当前线程。
  • arrayBuffers 指分配给 ArrayBufferSharedArrayBuffer 的内存,包括所有的 Node.js Buffer。 这也包含在 external 值中。 当 Node.js 用作嵌入式库时,此值可能为 0,因为在这种情况下可能无法跟踪 ArrayBuffer 的分配。

首先需要关注的是内存堆栈,也就是堆内存的占用。在Node的单线程模式下,C++程序(V8引擎)会为Node申请一定的内存,来作为Node线程的内存资源heapTotal。而在我们Node的使用过程中,声明的新的变量都会使用这些内存来进行存储heapUsed。 Node的分代式GC算法会在一定程度上浪费部分内存资源,所以当heapUsed达到heapTotal一半的时候,就可以强制触发GC操作了global.gc()。对于系统内存的监控处理,不能够仅仅像Node内存级别一样,进行GC操作就可以,而同样需要进行渲染降级。70% ~ 80%的内存占用就是非常危险的情况了。具体的数值需要根据环境所在的宿主机来确定。

const os = require('os')
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

class OsUtils {
  /**
   * 获取某一时间段内的 CPU 利用率
   * @param { Number } Options.ms 默认是 1000ms
   * @param { Boolean } Options.percentage true(以百分比结果返回)| false(小数返回) 
   * @returns { Promise } CPU 利用率
   */
  async getCPULoadavg(options = {}) {
    const that = this;
    const { cpuUsageMS = 1000, percentage = false } = options
    const t1 = that._getCPUMetric()
    await sleep(cpuUsageMS)
    const t2 = that._getCPUMetric()
    const idle = t2.idle - t1.idle
    const total = t2.total - t1.total
    let usage = 1 - idle / total

    percentage && (usage = `${(usage * 100.0).toFixed(2)}%`)

    return usage
  }

  /**
   * 获取 内存 信息
   * @param { Boolean } percentage true(以百分比结果返回)| false(小数返回)
   * @returns { Object } 内存 信息
   */
  getMemoryUsage(percentage = false) {
    const { rss, heapUsed, heapTotal } = process.memoryUsage()
    const sysFree = os.freemem()
    const sysTotal = os.totalmem();
    return {
      sys: percentage ? `${(1 - sysFree / sysTotal).toFixed(2) * 100}%` : 1 - sysFree / sysTotal,  
      heap: percentage ? `${(heapUsed / heapTotal).toFixed(2) * 100}%` : heapUsed / heapTotal,   
      node: percentage ? `${(rss / sysTotal).toFixed(2) * 100}%` : rss / sysTotal      
    }
  }

  /**
   * 获取 CPU 信息
   * @returns { Object } CPU 信息
   */
  _getCPUMetric() {
    const cpus = os.cpus();
    let user = 0, nice = 0, sys = 0, idle = 0, irq = 0, total = 0

    for (let cpu in cpus) {
      const times = cpus[cpu].times
      user += times.user
      nice += times.nice
      sys += times.sys
      idle += times.idle
      irq += times.irq
    }

    total += user + nice + sys + idle + irq

    return {
      user,
      sys,
      idle,
      total,
    }
  }
}

const osUtils = new OsUtils()
osUtils.getCPULoadavg({ percentage: true }).then(res => {console.log('当前CPU 利用率:', res)});
console.log('当前内存信息:',osUtils.getMemoryUsage(true))

结合CPU利用率及内存指标,根据实际情况设定阈值,超过阈值将SSR降级为CSR。

6.2、Nginx配置降级

  1. 在nginx配置中,将ssr请求转发至Node渲染服务器,并开启响应状态码拦截;
  2. 若响应异常,将异常状态转为200响应,并指向新的重定向规则;
  3. 重定向规则去掉ssr目录后重定向地址,将请求转发至静态HTML文件服务器。

流程如下:


Nginx相关配置

upstream static_env {
  server x.x.x.x:port1; //html静态文件服务器
}
upstream nodejs_env {
  server x.x.x.x:port2; //node渲染服务器
}

server {
  listen 80;
  server_name xxx;
  ... // 其他配置
  location ^~ /zyindex/ {
    proxy_pass http://static_env; //将非ssr目录的请求转发到静态HTML文件服务器
  }
  location ^~ /zyindex/ssr/ { 
    proxy_pass http://nodejs_env; //将ssr目录的请求转发node渲染服务器
    proxy_intercept_errors on; // 开启拦截响应状态码
    error_page 403 404 408 500 501 502 503 504 = 200 @static_page; // 若响应异常,将这些异常状态码改为200响应,并指向下面的新规则@static_page
  }
  location @static_page {
    rewrite_log on;
    error_log logs/rewrite.log notice;
    rewrite /zyindex/ssr/(.*)$ /zyindex/$1 last; // 去掉ssr目录后重新定向地址,将请求Node渲染服务器转发到静态HTML文件服务器
  }
}

降级总结

  • 偶发性降级 -- 偶发的服务端渲染失败降级为客户端渲染;
  • 配置平台降级 -- 通过配置平台修改全局配置文件主动降级,比如双十一等大流量情况下,可提前通过配置平台将整个应用集群降级为客户端渲染;
  • 监控系统降级 -- 监控系统跑定时任务监控集群状态,集群资源占用达到设定CPU/内存阈值将整个集群降级or扩容;
  • 渲染服务集群宕机 -- ssr渲染可以理解为另外一种形式的BFF层,接口服务器与ssr渲染服务器是独立的,html的获取逻辑回溯到Nginx获取,此时触发客户端渲染。

参考文献

福利部分

文章在 “大转转FE” 公众号也会发送,并且公众号有抽奖活动,本文奖品是转转纪念T恤一件或转转随机手办一个,可任选其一,欢迎大家关注 ✿✿ヽ(°▽°)ノ✿

编辑于 10-16

文章被以下专栏收录