Next.js水化错误：文本内容不匹配服务器渲染HTML（U+202F/U+0020）

问题分析 #

你遇到的三个错误确实由服务器与客户端渲染的日期文本字符不一致引发：服务器端生成的时间与AM/PM之间是窄不换行空格（U+202F），客户端是普通空格（U+0020），这种细微差异导致Hydration校验失败。

解决方案 #

方案1：统一在服务端完成日期格式化（推荐） #

不在客户端重新解析日期并格式化，直接在getServerSideProps中生成最终要显示的日期字符串，确保前后端输出完全一致：

export async function getServerSideProps() {
  const eventsResult = (await prisma.event.findMany()).slice(0, 3);
  const newsResult = (await prisma.news.findMany()).slice(0, 3);

  const formatOptions = {
    timeZone: "UTC",
    year: "numeric",
    month: "long",
    day: "2-digit",
    weekday: "long",
    hour: "2-digit",
    minute: "2-digit",
  };

  const formattedEventsResults = eventsResult.map((e) => ({
    ...e,
    start: new Date(e.start).toLocaleString(undefined, formatOptions),
    end: new Date(e.start).toLocaleString(undefined, formatOptions),
  }));

  const formattedNewsResult = newsResult.map((n) => ({
    ...n,
    datetime: new Date(n.datetime).toLocaleString(undefined, formatOptions),
  }));

  return {
    props: {
      events: formattedEventsResults,
      news: formattedNewsResult,
      backgroundColor: "red",
    },
  };
}

组件中直接渲染服务端格式化好的字符串：

{props.start}

方案2：客户端格式化时统一替换空格字符 #

如果必须在客户端做日期格式化，可将生成的字符串中的窄不换行空格替换为普通空格，强制对齐前后端输出：

{new Date(props.start).toLocaleString(undefined, {
  timeZone: "UTC",
  year: "numeric",
  month: "long",
  day: "2-digit",
  weekday: "long",
  hour: "2-digit",
  minute: "2-digit",
}).replace(/\u202F/g, ' ')}

方案3：手动拼接日期组件（完全可控） #

通过formatToParts拆分日期各部分，手动用普通空格拼接，彻底避免默认格式化的空格差异：

const formatDate = (date) => {
  const dtf = new Intl.DateTimeFormat(undefined, {
    timeZone: "UTC",
    year: "numeric",
    month: "long",
    day: "2-digit",
    weekday: "long",
    hour: "2-digit",
    minute: "2-digit",
    hour12: true
  });
  // 拆分日期组件后用普通空格拼接
  return dtf.formatToParts(date).map(part => part.value).join(' ');
};

// 组件内调用
{formatDate(new Date(props.start))}

为什么之前的修改无效？ #

你之前仅在getServerSideProps中将日期转为字符串（如e.start.toString()），但客户端仍会重新解析日期并调用toLocaleString。由于服务器与客户端的Intl实现存在细微差异（空格类型就是典型案例），最终输出的文本依然不一致，导致Hydration失败。

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