Next.js use client组件日期与图片缓存异常技术问询

关于'use client'文件的执行逻辑 #

• 标记'use client'的文件会同时在服务器和客户端执行：
  1. 服务器端：SSR/SSG阶段会执行文件顶层代码（包括组件外的const now = new Date()），生成初始HTML返回客户端。服务器默认使用UTC时区，所以此时now为UTC时间。
  2. 客户端：页面完成hydration（水合）后，当交互触发组件重渲染时，客户端会重新执行整个文件的顶层代码——这就是你看到now变为客户端时区的原因，因为此时代码运行在用户本地浏览器环境，使用本地时区。
• 组件外的顶层代码并非仅在页面刷新时运行，客户端每次需要初始化组件上下文时都会执行，交互触发的重渲染会触发这个过程。

关于图片缓存的问题 #

你已将日期移至组件内并修正时区逻辑，但刷新仍显示旧图片，可能原因如下：

• 初始date值来自服务器：若页面是SSR生成，初始date状态可能还是服务器端计算的UTC日期，导致初始图片src为旧地址，浏览器已加载旧图后，即使客户端后续更新状态也不会自动替换。
• 浏览器/CDN缓存策略：即使设置no-cache，部分CDN或浏览器仍会缓存静态资源。可以给图片URL添加版本参数或随机哈希规避：

  `https://website.com/data/${date}.png?v=${Date.now()}`
  

  同时确保date在客户端初始化时完全基于本地时区计算，避免服务器值干扰：

  const [date, setDate] = useState(() => {
    const localDate = new Date();
    return localDate.toLocaleDateString('en-CA'); // 生成YYYY-MM-DD格式的本地日期
  });
  

• 缓存控制头生效范围：确认no-cache头是设置在图片资源本身，而非页面响应头。若图片由CDN托管，需在CDN配置中设置对应缓存策略。

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