Next.js服务端组件实现按分钟动态切换文本的问题

你的问题出在Next.js默认的静态优化机制上：服务端组件会在构建阶段就执行new Date()并将结果固化到静态页面中，导致后续刷新页面时不会重新计算当前时间。要让组件每次请求都在服务端重新计算时间，需要启用动态渲染，以下是具体解决方案：

方案一：给组件添加动态渲染配置 #

直接在MyComponent.jsx中导出dynamic配置，强制组件每次请求都重新渲染：

// ./components/MyComponent.jsx

// 关键配置：强制动态渲染，每次请求都在服务端重新执行组件逻辑
export const dynamic = 'force-dynamic';

const Component = ({ data }) => {
  const currentMinute = new Date().getMinutes();
  return <>
    {currentMinute % 2 === 0 ? "Hi" : "Hello"}
  </>
}

export default Component

方案二：在布局层面开启动态渲染 #

如果需要让整个PostLayout都保持动态渲染（比如还有其他需要实时计算的内容），可以在PostLayout.tsx中添加同样的配置：

// ./layouts/PostLayout.tsx

// 让整个布局每次请求都动态渲染
export const dynamic = 'force-dynamic';

import MyComponent from '@/components/MyComponent.jsx'
// ..

export default function PostLayout({ content, authorDetails, next, prev, children }: LayoutProps) {
  // ..
  
  return (
    <>
      // ..
      <MyComponent data={""} />
      // ..
    </>
  )
}
// ..

替代方案：使用revalidate禁用缓存 #

你也可以用revalidate: 0替代dynamic: 'force-dynamic'，效果一致，它表示禁用组件的缓存，每次请求都重新生成内容：

// 在MyComponent.jsx中添加
export const revalidate = 0;

这样修改后，用户每次刷新页面时，服务端都会重新计算当前分钟数，根据奇偶显示对应的文本，同时保持服务端组件的低延迟特性，无需切换到客户端组件。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶