一.相关术语
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
部署时同时发布两个服务,由运维进行流量监控,流量过大时切换服务