Next.js App Router：让Server Component自定义函数运行时执行

你的问题核心是静态生成的页面会在构建阶段预计算getMyAge的结果，后续不会更新。要让它在每次用户请求时在服务器端重新计算，无需使用客户端组件，Next.js App Router有两种直接的实现方式：

方案一：强制页面动态渲染 #

在page.tsx中添加dynamic配置，指定页面为动态渲染模式，这样每次请求都会在服务器端重新执行组件逻辑：

// app/page.tsx
import { getMyAge } from './utils/datetime';

// 强制页面每次请求都在服务器端渲染
export const dynamic = 'force-dynamic';

export default function Home() {
  return (
    <Page>
      <Paragraph>I'm {getMyAge()} years old</Paragraph>
    </Page>
  );
}

方案二：禁用组件缓存（Next.js 13.4+ 稳定版） #

使用next/cache中的noStore函数，在组件内禁用缓存，触发动态渲染：

// app/page.tsx
import { getMyAge } from './utils/datetime';
import { noStore } from 'next/cache';

export default function Home() {
  // 禁用缓存，确保每次请求都重新计算年龄
  noStore();

  return (
    <Page>
      <Paragraph>I'm {getMyAge()} years old</Paragraph>
    </Page>
  );
}

两种方案的区别 #

• dynamic: 'force-dynamic'是页面级别的配置，整个页面的所有逻辑都会在每次请求时重新执行。
• noStore()是组件级别的控制，更灵活，如果你只需要页面中某部分内容动态更新，可以仅在对应组件中调用该函数。

两种方式都保持了Server Component的特性，所有计算都在服务器端完成，无需客户端参与。

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