Next.js 13中redirect触发fetch失败错误的排查与修复

问题原因 #

1. Next.js版本兼容bug：报错UND_ERR_REQ_CONTENT_LENGTH_MISMATCH是Next.js 13 App Router早期版本的已知问题，底层依赖的undici库在处理Server Action的redirect响应时，会出现请求体长度与Content-Length头不匹配的校验错误。从日志可见数据库操作已正常完成（COMMIT执行成功），但redirect的内部处理逻辑抛出了异常。
2. 客户端缓存未失效：redirect后页面数据未更新，是因为客户端组件复用了之前缓存的查询结果，没有触发重新获取最新数据。

修复方法 #

1. 升级Next.js到最新稳定版 #

官方在后续的13.x版本中修复了Server Action与redirect的兼容bug，执行以下命令升级：

npm install next@latest
# 或使用yarn/pnpm
yarn add next@latest
pnpm add next@latest

2. 临时兼容调整（无法升级时） #

• 简化FormData值的处理，移除多余的valueOf()调用：

async function createTodo(data: FormData) {
  "use server";
  const title = data.get("title") as string;
  if (!title || title.length === 0) {
    throw new Error("Invalid title");
  }

  await prisma.todo.create({ data: { title, complete: false } });
  redirect("/");
}

• 若仍报错，可在redirect前添加return（显式终止函数执行流）：

await prisma.todo.create({ data: { title, complete: false } });
return redirect("/");

3. 强制客户端数据刷新 #

如果升级后数据仍未更新，需确保首页的Todo列表组件使用动态数据获取：

• 若用fetch获取数据，添加cache: "no-store"禁用缓存：

async function getTodos() {
  const res = await fetch("/api/todos", { cache: "no-store" });
  return res.json();
}

• 若在Server Component中直接用Prisma查询，添加动态标识强制刷新：

export const dynamic = "force-dynamic";

async function Home() {
  const todos = await prisma.todo.findMany();
  return <TodoList todos={todos} />;
}

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