• 本文章主要未探索koa与nextjs的性能情况以及解决方案，想直接了解决方案的同学，可以直接翻到最底部。
• 文章有很多是跑的性能指标图片，如有不合理之处，欢迎留言交流😊；

环境准备

• 机器配置

MacBook Pro (16-inch, 2019)
2.6 GHz 六核Intel Core i7
32G内存

• 系统环境配置

node v14.17.2
npm  v6.14.13
pm2  v5.2.0
// 性能测试工具版本
autocannon v7.9.0
clinic v12.0.0

• 代码项目包版本

 "koa": "^2.13.4",
 "koa-router": "^12.0.0",
 "nodemon": "^2.0.19",
 "next": "12.3.0",

创建一个简单的koa进程

创建一个简单的koa进程，访问http://localhost:52013/test时，返回一个hello world的字符串；

const Koa = require('koa');
const router = require('koa-router')();
const app = new Koa();
const post = 52013;
router.get('/test', async (ctx, next) => {
  ctx.body = "hello world";
})

app.on('error', err => {
  console.error('catch server error', err)
});

app.use(router.routes()); //作用：启动路由
app.use(router.allowedMethods());

app.listen(post, () => {
  console.log(`启动${post}端口`);
});

使用autocannon进行性能测试

用koa返回hello world字符串，单核性能测试

autocannon -c100 -d10 localhost:52013/test
10秒100个连接数

10秒100个连接数

autocannon -c1000 -d10 localhost:52013/test
10秒1000个连接数

10秒1000个连接数

autocannon -c10000 -d10 localhost:52013/test
10秒10000个连接数

10秒10000个连接数

koa用pm2启用集群模式（2个）

autocannon -c100 -d10 localhost:52013/test
10秒100个连接数

image.png

autocannon -c1000 -d10 localhost:52013/test
10秒1000个连接数

image.png

autocannon -c10000 -d10 localhost:52013/test
10秒10000个连接数

image.png

从结果来看，使用pm2集群部署能承受更高的并发请求

koa单进程与集群部署性能差异

koa返回与nextjs请求两个接口时，相同的html字符串数据

autocannon -c1000 -d10 localhost:52013/test
10秒1000个连接数

image.png

nextjs返回Hello world

autocannon -c1000 -d10 localhost:3000
10秒1000个连接数

image.png

nextjs使用getStaticProps与getStaticPaths，不请求接口

autocannon -c1000 -d10 localhost:3000/channel/25950
10秒1000个连接数
从结果来看，损失损失27%

image.png

nextjs使用getStaticProps与getStaticPaths,请求两个接口

autocannon -c1000 -d10 localhost:3000/channel/25950
10秒1000个连接数
从结果来看，两个接口大约会损失60%多的并发数，并且接口超时，会导致返回error数据

image.png

nextjs使用getServerSideProps，不请求接口

autocannon -c1000 -d10 localhost:3000/channel/25950
10秒1000个连接数
从结果来看，getServerSideProps大约会损失82%多的并发数，并且超时请求，非常多

image.png

nextjs使用getServerSideProps，请求两个接口

autocannon -c1000 -d10 localhost:3000/channel/25950
10秒1000个连接数
从结果来看，在getServerSideProps中请求两个接口大约会损失96%多的并发数，并且存在超时请求

image.png

nextjs使用getServerSideProps，请求两个接口，增加最新middleware.js

autocannon -c1000 -d10 localhost:3000/channel/25950
10秒1000个连接数
从结果来看，损失率没增加middleware大致相同，但是超时链接明显增加了

image.png

nextjs静态页面，增加最新middleware.js

autocannon -c1000 -d10 localhost:3000
10秒1000个连接数
从结果来看，会损失80%多的并发数，并且超时请求也非常多

image.png

在nextjs中使用getStaticProps、getStaticPaths、getServerSideProps、middleware方法后的性能损耗

在nextjs中使用getStaticProps、getStaticPaths、getServerSideProps、middleware方法后的性能损耗.png

各方法在请求接口后的性能损耗后

各方法在请求接口后的性能损耗后.png

基于上面测试数据，我们可以得出以下几点：

• 请求数据越多，并发数越低，所以需要尽量缩减生成的html数据大小；
• 使用middleware对整个nextjs影响较大，不管是静态页面还是SSG、ISR、SSR，如能不使用，最好不要用（影响范围：全局）；
• getServerSideProps对性能同样影响很大，不过渲染的数据能实时传输；
• getStaticProps与getStaticPaths对性能影响较小，不过数据实时性很差，使用pm2多集群部署时，会产生严重的数据延迟,因为服务端的生成的ISR页面，只有在下一次请求成功时，才会更新，但是下一次请求获取到的数据却依然是老的数据，再次请求，才是上一次的数据（导致部署pm2多集群时，可能会出现严重的数据延迟）；

针对以上几点，可以尝试以下几个优化方向：

1.对传输数据进行压缩；
2.自定义服务端，搭建一个node服务端：

• 将node与nextjs集成,node层将nextjs使用getServerSideProps函数返回的html进行缓存处理；
• 将node与nextjs集成，node层对nextjs使用getStaticProps与getStaticPaths的数据进行更新，并进行获取；

3.部署docker集群;

主要针对第二点的第一个方案；

需要考虑的点：

保证部署多集群时，缓存数据是对集群服务器是同步的
如果不是同步的，将数据存储在单个进程的内存中，那么可能造成缓存一份数据，每台机器都需要缓存一下，并且返回数据时，（对于实时性高的应用）返回的数据可能都不同，生成html和缓存html都需要花费时间
如何保证nextjs返回的数据是正常准确的

解决方案：将数据存储在redis数据库

redis缓存方案.png

单进程，在本地使用缓存后的情况

无数据交互静态页面

image.png

请求两个接口时

image.png

集群模式

无数据交互静态页面

image.png

请求两个接口时

image.png

使用redis缓存与之前的性能对比

使用redis缓存与之前的性能对比.png