如何在NextJS的getServerSideProps中高效发起多API请求获取页面数据？

关于Promise.allSettled的取舍 #

不建议继续无脑用Promise.allSettled同时发起12+请求。原因很明确：浏览器对同一域名的并发请求数有默认限制（通常是6-8个），一次性发起十几请求会导致请求队列阻塞，后续请求必须等待前面的完成才能发送，反而拖慢整体加载速度；另外，服务器也可能因瞬间流量过高出现延迟响应甚至限流，进一步恶化性能。

更优的请求策略 #

给你几个实际可落地的优化方向：

• 请求分批处理：把所有请求分成2-3批，每批控制在6个以内，用Promise.allSettled处理单批请求，上一批完成后再发起下一批。这样既利用了并发优势，又不会触发浏览器或服务器的并发限制。
• 优先级调度：区分组件的显示优先级，优先加载首屏可见组件对应的API请求；非首屏组件（比如折叠区域、页面底部内容）的请求，延迟到首屏内容加载完成后再触发，比如通过setTimeout或者监听页面滚动事件来启动后续请求。
• 后端聚合接口：如果能协调后端同学，把多个组件的接口需求合并成1-2个聚合接口。前端只需发起少量请求就能拿到所有数据，大幅减少网络握手开销，这是性能提升最显著的方案。
• 缓存复用：对更新频率低的API数据，在前端做本地缓存（比如内存缓存、localStorage），相同页面再次加载时直接复用缓存数据，避免重复请求。

组件内用useEffect发起请求与SSR的关系 #

可以把请求移到组件内通过useEffect实现，但确实会丢失SSR的核心优势：

• SSR的核心价值是在服务器端提前渲染出完整的HTML内容，用户打开页面就能看到有效内容；而useEffect是在客户端组件挂载后才执行，这会导致页面先渲染空结构，再通过请求填充数据，出现“内容闪烁”的问题，同时SEO也会受影响（爬虫可能无法抓取动态加载的内容）。
• 如果想兼顾组件独立管理请求和SSR能力，可以用框架提供的服务端数据方案：
  • 比如Next.js的getServerSideProps（每次请求时在服务器端获取数据）或getStaticProps（构建阶段预渲染数据），在页面层面统一获取所有组件需要的数据，再通过props传递给对应组件；
  • 或者使用React 18的Suspense配合支持Suspense的数据源（比如包装后的fetch），在组件内声明数据依赖，服务器端渲染时会等待数据获取完成再渲染组件，既保留组件的独立性，又不丢失SSR的优势。

内容的提问来源于stack exchange，提问作者Mic Scofield