如何让Next.js App Router的API路由表现得像Pages Router

一、API路由实现每次请求执行 #

App Router的API路由默认会被静态优化，构建后返回固定内容。要和Pages Router一样每次请求都运行服务器代码，只需显式开启动态渲染，有两种方式：

• 方式1：添加dynamic = 'force-dynamic'指令
  在你的app/api/route1.ts顶部加入以下代码，强制路由每次请求都在服务器端执行：

export const dynamic = 'force-dynamic';

export async function GET() {
  return new Response(JSON.stringify({ time: new Date().toISOString() }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

• 方式2：设置revalidate = 0
  也可以通过禁用缓存来实现，效果和上面一致：

export const revalidate = 0;

export async function GET() {
  return new Response(JSON.stringify({ time: new Date().toISOString() }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

二、RSC实现每次请求执行 #

React Server Components默认同样是静态生成的，要让组件每次请求都重新执行服务器端逻辑，同样需要声明动态行为：

• 在组件文件顶部添加动态指令
  比如你的服务器组件文件：

export const dynamic = 'force-dynamic';

export default async function MyServerComponent() {
  const currentTime = new Date().toISOString();
  return <div>当前请求时间：{currentTime}</div>;
}

• 或者使用revalidate = 0替代dynamic = 'force-dynamic'，同样能让组件每次请求都重新渲染。

补充说明 #

Next.js App Router的默认策略是尽可能做静态优化以提升性能，因此需要显式声明动态行为来覆盖默认逻辑。force-dynamic和revalidate=0都能将路由/组件标记为动态资源，确保每次请求都会在服务器端执行对应的代码逻辑。

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