Next 13-14中双数据请求导致SSR完全消失的问题

问题场景 #

使用以下代码时，开发者工具网络面板的Doc标签页中完全看不到SSR相关请求；仅保留getAccounts或getProfile其中一个请求时，SSR恢复正常。两个请求可独立正常工作，即使将getProfile移入HeaderBlock组件，问题仍存在——除非移除另一个请求。

const getAccounts = async (): Promise<IAccountItem[]> => {
  const data = await fetchClient('/accounts');
  return Object.values(data.body);
};

const getProfile = async (): Promise<Profile> => {
  return await fetchClient('/auth/me');
};

export default async function AccountsPage() {
  const accounts = await getAccounts();
  const profile = await getProfile();

  return (
    <>
      <div className={styles.header}>
        <HeaderBlock accounts={accounts} profile={profile} />
        <NavMenu />
      </div>
      <AccountList accounts={accounts} />
    </>
  );
}

问题原因 #

1. 串行请求导致SSR超时：页面组件中两个异步请求串行执行，拉长了服务器渲染的总耗时。若超过框架默认超时阈值，服务器会放弃SSR，降级为客户端渲染，此时Doc标签页无SSR文档请求。
2. 请求异常未处理：若fetchClient未正确捕获异常，单个请求失败会导致整个页面组件的Promise链中断，触发客户端兜底渲染。
3. 请求配置冲突：fetchClient的请求头、身份认证信息（如Cookie）可能在并发请求时出现覆盖或冲突，导致服务器拒绝处理请求。

解决方案 #

1. 并行发起请求，缩短总耗时 #

将串行的await改为Promise.all并行执行，减少服务器端等待时间：

export default async function AccountsPage() {
  const [accounts, profile] = await Promise.all([
    getAccounts(),
    getProfile()
  ]);

  return (
    <>
      <div className={styles.header}>
        <HeaderBlock accounts={accounts} profile={profile} />
        <NavMenu />
      </div>
      <AccountList accounts={accounts} />
    </>
  );
}

2. 添加异常捕获，避免渲染崩溃 #

给请求函数添加异常处理，确保单个请求失败不影响整个页面渲染：

const getAccounts = async (): Promise<IAccountItem[]> => {
  try {
    const data = await fetchClient('/accounts');
    return Object.values(data.body);
  } catch (err) {
    console.error('获取账户列表失败:', err);
    return [];
  }
};

const getProfile = async (): Promise<Profile> => {
  try {
    return await fetchClient('/auth/me');
  } catch (err) {
    console.error('获取用户信息失败:', err);
    return { id: '', name: '匿名用户' } as Profile;
  }
};

3. 检查请求配置兼容性 #

验证fetchClient的请求头、认证信息是否正确传递，避免并发请求时出现配置覆盖。可在fetchClient中打印请求参数，确认两个请求的配置无冲突。

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