Next.js服务端组件同渲染中no-store fetch重复调用仅发一次请求问题

算力阿峰

2026-7-1

Next.js SSR 同渲染周期请求复用问题及解决方案

问题原因

你遇到的情况确实是Next.js的同渲染周期请求复用机制导致的：

在同一次用户HTTP请求触发的服务器渲染流程中，Next.js会自动复用相同参数的fetch请求结果——即使你设置了cache: "no-store"。
文档里提到的“每次请求都重新获取”，指的是用户发起的完整HTTP请求（比如刷新页面、新导航），而非同一次渲染内部的多次函数调用。这就是为什么你看到console.log执行了两次，但数据库只收到一次请求的原因。

触发两次独立请求的方法

要让两个调用触发独立的请求，核心是让Next.js将它们判定为不同的请求，具体可以用以下方式：

1. 添加唯一标识参数/请求头

在fetchUserData中给请求添加唯一的查询参数或自定义请求头，让每次调用的请求特征不同：

async function fetchUserData() {
  const res = await fetch('/api/user', {
    cache: "no-store",
    headers: {
      // 添加唯一请求头，让请求唯一
      'x-unique-request-id': crypto.randomUUID()
    }
  });
  if (!res.ok) throw new Error('Failed to fetch user data');
  return res.json();
}

2. 传递区分标识给封装函数

在调用fetchUserData时传入不同的标识，让请求URL或参数产生差异：

// 布局组件中调用
const userStateLayout = await fetchUserData('layout');
// 子组件中调用
const userStateChild = await fetchUserData('child');

// 修改fetchUserData函数
async function fetchUserData(source: string) {
  const res = await fetch(`/api/user?source=${encodeURIComponent(source)}`, {
    cache: "no-store"
  });
  if (!res.ok) throw new Error('Failed to fetch user data');
  return res.json();
}