Next.JS：客户端组件中的日期基于服务器的本地时间

Question

背景

当我在标有“使用客户端”的组件内声明

const now = new Date()

时，当客户端采用太平洋时间时，日期将记录为 UTC 日期。我在组件外部声明变量。

问题

当我与客户端上的组件交互以导致重新渲染时，日期变量的值会更改为客户端的时区，就好像组件外部的代码再次运行一样。我想了解这是为什么。我认为这段代码只会在页面重新加载时再次运行。

问题

我知道这个变量首先在服务器上初始化，但我不明白为什么组件外部的代码在组件第一次重新渲染时在客户端上运行。

我想更多地了解发生了什么。标有“使用客户端”的组件的生命周期是怎样的？整个文件是否首先在服务器上运行，然后在第一次交互后再次在客户端上运行？

更新

我将声明移到了组件内部，并添加了一些逻辑，以确保时区正确，无论日期在何处声明。即使 src 属性包含不同的日期并且存在

no-cache

缓存控制标头，刷新后仍会显示前一天的图像。不过，只有当我来回循环图像时，才会显示正确的图像。即使 src 状态被重置为当前日期，旧组件是否会在刷新后呈现？我的 src 看起来像这样：

https://website.com/data/${date}.png

，日期是一个状态变量。

Answer 1

因为在服务器上，代码将在 ssr 期间运行，并且日期将采用服务器的时区（如果未配置，通常默认为 UTC）。

在客户端上，React 重新渲染组件，这会导致 const

now = new Date()

也在客户端上执行，从而产生客户端时区中的日期（在您的情况下是太平洋时间）。