SSR限流降级方案-前端实现

​​​​SSR:服务端渲染

CSR:客户端渲染（通常是浏览器）

ISR:增量式的网站渲染

服务降级:页面默认SSR渲染,当网站流量过大时切换成CSR渲染

二.需求背景

由于SSR比较依赖服务器,提升性能有瓶颈,单个pod并发过低,需更换转换折中方案.

网页默认使用SSR渲染,当检测到系统流量过大时切换成CSR渲染

三,使用页面
/search 页面

四,前端代码实现原理

1.search页面配置两个入口文件

index.jsx(SSR渲染模式)

export async function getServerSideProps(context) { 
 return serverComponents(context, 'search'); // 封装的SSR渲染函数 
}

index.csr.js(CSR渲染模式) 

//此方法并非纯CSR模式,使用getStaticProps(ISR)渲染出头部和整体框架内容,其他数据内容使用CSR渲染
export async function getStaticProps(context) {
  let { preview = false, previewData = null, params = {} } = context;
  const { staticStore: headerStaticStore } = await Header.getStaticProps( //头部
    context, 
    `/search`,
    true
  );
  return {
    props: {
      params,
      preview,
      previewData,
      staticStore: {
        ...headerStaticStore,
      },
    },

    revalidate: 20,
  };
}

2.静态文件路径配置

//next.config文件
      const assetPrefix = process.env.CDN_PREFIX || process.env.APP_MODE  //CDN_PREFIX CDN地址
            ? `/_next/${assetPrefixName}/${process.env.APP_MODE}` //assetPrefixName项目名称 ,APP_MODE打包模式CSR或者SSR
            : `/_next/${assetPrefixName}`;
      beforeFiles: [
        {
          source: `/_next/${assetPrefixName}/${
            process.env.APP_MODE && process.env.APP_MODE + '/'
          }:path*`,
          destination: `/:path*`,
        },
      ]
  //config 第一层加上
  pageExtensions: ['jsx']  //防止js文件被打包成页面
  distDir: config.distDir + `/${process.env.APP_MODE || 'ssr'}`, //服务访问静态路由的路径

配置静态文件前缀,用来区分CSR和SSR的静态文件,后面用来进行服务转发(详见第五条)

3.打包配置

APP_MODE=ssr yarn changeMode && APP_MODE=ssr yarn build:环境变量

APP_MODE为变量,可设置为csr和ssr,分别对应打包成对应的模式,

changeMode为打包脚本,通过更改入口文件来进行打对应模式的包

例如:当APP_MODE 为ssr时会检测pages/search文件下是否有index.ssr.js文件,如果没有则直接使用index.jsx进行打包,如果有责将其更改为index.jsx,再进行打包

文件地址 /scripts/changeMode (ISR模式暂未使用)

const shell = require('shelljs');
var fs = require('fs');
let url = 'src/pages/search/index';
let appMode = process.env.APP_MODE;
let afterList = ['.ssr.js', '.isr.js', '.csr.js'];
if (appMode) {
  afterList.map((pre) => {
    let { code } = shell.find(url + pre);
    if (code) {
      fs.rename(url + '.jsx', url + `${pre}`, errfun);
    }
  });
  afterList.map((item) => {
    if (item.indexOf(appMode) !== -1) {
      fs.rename(url + `.${appMode}.js`, url + '.jsx', errfun);
    }
  });
}
function errfun(error) {
  console.log(error);
}

打包脚本更改为同时打包多个服务
 

"build:develop": "APP_ENV=dev yarn build",
"build:develop:multi": "APP_MODE=csr yarn changeMode && APP_MODE=csr yarn build:develop && APP_MODE=ssr yarn changeMode && APP_MODE=ssr yarn build:develop",

分支名
如果有新的环境则需要添加打包命令,此命令会同时打包CSR和SSR服务
dev环境打包完成后build文件夹结构如下

build
|-dev
  |-ssr
  |-csr

部署时同时发布两个服务,由运维进行流量监控,流量过大时切换服务