如何在服务端渲染的Next.js React组件中使用Intl.DateTimeFormat？

水合错误的核心原因是服务端与客户端生成的日期格式化结果不一致——比如两者的默认时区、Locale设置不同，导致渲染出的文本内容不匹配，触发React水合校验失败。以下是具体解决方案：

1. 统一服务端与客户端的Locale和时区 #

明确指定格式化参数，不要依赖系统默认值（服务端服务器的默认Locale/时区通常和客户端浏览器不同）：

// 全局统一格式化配置
const dateFormatConfig = {
  locale: 'zh-CN',
  options: {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    timeZone: 'Asia/Shanghai' // 强制统一时区
  }
};

function FormattedDate({ date }) {
  return (
    <time dateTime={date.toISOString()}>
      {new Intl.DateTimeFormat(dateFormatConfig.locale, dateFormatConfig.options).format(date)}
    </time>
  );
}

2. 仅在客户端执行格式化 #

如果无法保证服务端与客户端环境一致，可通过useEffect延迟格式化逻辑，让组件仅在客户端渲染日期：

import { useState, useEffect } from 'react';

function ClientOnlyFormattedDate({ dateStr }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    const formatter = new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
    setFormattedDate(formatter.format(new Date(dateStr)));
  }, [dateStr]);

  return <time dateTime={dateStr}>{formattedDate}</time>;
}

3. 用Suspense隔离出错组件 #

如果不想放弃服务端渲染，可将日期组件包裹在Suspense边界内，这样即使水合出错，也只会降级该组件的渲染，不会导致整个应用切换到客户端渲染：

import { Suspense } from 'react';

function AppLayout() {
  return (
    <main>
      <Suspense fallback={<div>加载日期中...</div>}>
        <FormattedDate date={new Date()} />
      </Suspense>
    </main>
  );
}

4. 结合Next.js全局国际化配置（App Router） #

如果使用Next.js 13+ App Router，可通过全局Locale配置统一服务端与客户端的语言环境：
在app/layout.js中设置全局Locale：

export const metadata = {
  locale: 'zh-CN',
};

之后组件中直接使用该Locale进行格式化，确保两端环境一致。

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