Next.js使用yarn export部署后new Date返回缓存值如何解决

你使用yarn export做Next.js静态站点导出时，所有页面的HTML会在构建阶段预先生成并固化，所有构建阶段执行的JS逻辑（包括组件内直接调用的new Date()、useState的初始值）都会在打包时运行，返回的自然是构建当日的日期，这个结果会直接写死在静态HTML文件里。

你加了useEffect的代码逻辑本身是正确的，useEffect只会在客户端浏览器完成页面挂载后才运行，正常会触发一次状态更新把日期替换成访问者的当前实时日期。如果仍看到旧日期，通常是两个原因：

• 页面刚加载时你看到的是静态HTML里固化的旧日期，useEffect触发更新有极短的延迟，感知不明显的话可以通过初始占位符的方式避免旧日期露出
• 浏览器缓存了旧的静态资源，强制刷新页面清理缓存即可验证

调整后的代码可以同时避免旧日期闪现和hydration不匹配警告：

import { useEffect, useState } from 'react';

export function MyComponent() {
  // 初始值设为null，避免构建阶段生成旧日期
  const [now, setNow] = useState(null);

  useEffect(() => {
    // 仅在客户端环境设置当前真实日期
    setNow(new Date());
    // 如需页面不刷新跨天也自动更新，可保留下面的定时器，不需要直接删除即可
    const updateTimer = setInterval(() => {
      setNow(new Date());
    }, 60000); // 每分钟更新一次

    return () => clearInterval(updateTimer);
  }, []);

  // 客户端挂载前显示占位内容，避免hydration mismatch
  if (!now) return <div>-/-/----</div>;

  return (
    <div>{now.getDate()}/{now.getMonth() + 1}/{now.getFullYear()}</div>
  );
}

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