NextJS并行路由中?_rsc请求解析及多次请求问题解决

• 重复的并行路由插槽配置：如果在app目录下错误创建了多个同名的并行路由插槽（如重复的@slot文件夹），或路由配置中重复引入同一插槽组件，会导致每个插槽的渲染逻辑被多次触发，进而引发多轮API调用与RSC请求。
• RSC请求的重复触发：并行路由的每个插槽作为独立的React Server Components单元，若存在布局嵌套错误、组件复用逻辑不当，会导致每个插槽的RSC资源请求被重复发起；若数据获取时未启用缓存（如设置cache: 'no-store'），也会触发重复的API调用。
• 中间件匹配规则过宽：若中间件的matcher配置匹配了所有包含_rsc参数的请求，每个并行路由插槽的RSC请求都会触发一次中间件，当有6个独立RSC请求时，中间件就会被调用6次。
• Link组件预加载逻辑异常：Next.js的<Link>默认预加载目标路由的所有资源，若目标路由包含6个并行插槽，每个插槽的RSC资源都会被预加载；若Link组件被重复渲染（如循环中多次输出），也会触发多轮预加载请求。
• 数据获取逻辑重复绑定：若在每个插槽组件中重复编写相同的数据获取代码，且未做缓存处理，会导致每次渲染都重新发起API请求，最终出现多次调用的情况。

1. 清理并行路由配置 #

• 检查app目录结构，确保没有重复的并行路由插槽（如同名的@xxx文件夹），删除不必要的重复插槽定义。
• 确认路由嵌套逻辑合理，避免无意义的并行拆分，减少不必要的RSC单元数量。

2. 优化数据获取与缓存 #

• 在服务器组件的fetch请求中保留默认的cache: 'force-cache'配置，或显式启用缓存：

  const data = await fetch('/api/data', { cache: 'force-cache' });
  

• 使用Next.js的unstable_cache工具封装共享的数据获取逻辑，实现跨组件的缓存复用：

  import { unstable_cache } from 'next/cache';
  
  const fetchData = unstable_cache(async () => {
    const res = await fetch('/api/data');
    return res.json();
  }, ['data-cache-key'], { revalidate: 3600 });
  

• 将共享数据的获取逻辑移至父级布局组件（服务器组件），通过props传递给各个插槽，避免重复请求。

3. 调整中间件匹配策略 #

• 优化中间件的matcher配置，仅匹配实际页面路由，排除_rsc请求：

  export const config = {
    matcher: ['/', '/profile/:path*', '/settings/:path*'],
  };
  

• 在中间件内部判断请求类型，跳过RSC请求的不必要逻辑：

  export function middleware(request) {
    if (request.nextUrl.searchParams.has('_rsc')) {
      return NextResponse.next();
    }
    // 执行其他中间件逻辑
  }
  

4. 控制Link组件预加载行为 #

• 若不需要预加载，给<Link>添加prefetch={false}属性：

  <Link href="/target" prefetch={false}>目标页面</Link>
  

• 检查组件渲染逻辑，避免重复渲染同一个Link组件，比如排查循环渲染或嵌套组件中的重复输出。

5. 验证生产模式表现 #

• 开发模式下的热重载可能会触发额外请求，先构建生产版本并启动服务：

  npm run build && npm start
  

  验证生产环境下是否仍存在多次调用问题，若生产环境正常，则属于开发模式的调试特性导致，无需额外处理。

内容的提问来源于stack exchange，提问作者SeokJun Yeom