Qwik部署Cloudflare Pages后本地与线上时区不一致问题求助

问题原因 #

本地预览时，浏览器运行环境的时区是+08，datefns的format方法默认使用运行环境的本地时区；而部署到Cloudflare Pages后，Qwik的SSR（服务器端渲染）环节使用的是服务器的UTC时区，导致最终输出UTC时间。HTML本身没有全局强制时区的设置，必须通过代码显式指定时区。

解决方案 #

使用datefns-tz扩展包来处理时区格式化，确保客户端和服务器端都使用指定的+08时区（Asia/Shanghai）：

1. 安装依赖

npm install datefns-tz

2. 修改你的代码

import { formatInTimeZone } from 'datefns-tz';

function timeElements(date: string, time: string) {
    const timeFromString = new Date(`${date}T${time}:00.000+08:00`);
    // 指定目标时区
    const targetTimeZone = 'Asia/Shanghai';

    const formattedDateString = formatInTimeZone(
        timeFromString,
        targetTimeZone,
        "MMM do, yyyy | K:mm XX"
    );
    const dateAttrVal = formatInTimeZone(
        timeFromString,
        targetTimeZone,
        "yyyy-LL-dd KK:mm"
    );

    return (
        <>
            <time dateTime={dateAttrVal}>{formattedDateString}</time>
        </>
    );
}

说明 #

• formatInTimeZone方法会忽略运行环境的时区，严格按照指定时区格式化时间，不管是客户端浏览器还是Cloudflare服务器端渲染环境，都能输出一致的+08时区时间。
• 优先使用IANA时区标识符（如Asia/Shanghai），比直接写+08:00更可靠，能自动适配夏令时等特殊时间规则。

内容的提问来源于stack exchange，提问作者greg pinakapoging nilalang sa