在Next.js应用中从useEffect发起API调用是否可行？

首先明确结论：在React组件内部用useEffect发起API调用完全不是错误做法，也不会违背Next.js的静态页面设计目标，两种API调用方式仅适用场景不同，不存在非此即彼的对错。 #

两类API调用方式的适用边界 #

• 服务端/构建阶段调用（getServerSideProps/getStaticProps/App Router 服务端组件fetch）：适用于获取页面首屏渲染必需的公开数据，数据不需要依赖用户端状态、交互行为或本地存储信息。这类调用能让返回的页面自带完整内容，既有利于SEO，也能降低用户端首屏等待时间，是Next.js静态/服务端渲染能力的典型使用场景。
• 客户端useEffect调用：适用于所有需要依赖用户端上下文的场景，包括但不限于：
  • 获取和用户登录态绑定的私有数据，比如个人订单、收藏列表
  • 响应用户交互的动态数据更新，比如切换分类加载对应内容、滚动加载更多
  • 不影响页面主内容的非核心数据，比如侧边栏热门推荐、评论区内容，这类数据不需要参与SEO，也不会影响首屏核心内容的渲染速度

对静态页面设计目标的影响 #

Next.js的核心设计是混合渲染模式，而非强制所有页面都实现纯静态、所有数据都在服务端获取。静态页面的核心目标是提升首屏性能、优化SEO，对于不影响这两个目标的动态数据，放到客户端加载反而能降低服务端压力，提升静态页面的缓存命中率，完全符合Next.js的设计理念。
举个常见的最佳实践案例：博客详情页的文章内容通过getStaticProps在构建阶段获取，保证页面静态化、SEO效果达标；而文章的实时点赞数、用户评论内容通过useEffect在客户端加载，两者结合的方案是行业内的通用做法。 #

补充优化建议 #

如果你使用的是Next.js 13+的App Router，可以通过服务端组件与客户端组件的组合进一步优化架构：核心静态内容由服务端组件在服务端直接渲染，需要动态加载数据的交互模块拆分为独立的客户端组件，内部可以用useEffect或者SWR、React Query等数据请求库处理API调用逻辑。 #

内容的提问来源于stack exchange，提问作者Marlon Englemam