刷新页面后NextJS触发Hydration错误，求可行解决方案

错误根源分析 #

你遇到的三个Hydration错误核心都是服务端渲染的HTML与客户端首次渲染的DOM结构/文本不一致，从代码里能定位到两个关键触发点：

• 日期格式化的环境差异：服务端（Node.js）和浏览器的toLocaleString()默认时区、本地化规则不同，导致渲染的发布时间文本不一致
• Formik组件初始化差异：Formik在服务端渲染时生成的DOM结构，和客户端完成hydration后的结构存在细微差异

具体修复方案 #

1. 统一日期格式化逻辑 #

把日期格式化移到服务端处理，彻底避免环境差异：
修改getStaticProps，在返回前完成日期格式化：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const query = `
    *[_type == "post" && slug.current == $slug][0]{
        _id,
        _createdAt,
        description,
        slug,
        mainImage,
        title,
        author -> {
          name,
          image
        },
        body
      }
    `
  const post = await client.fetch(query, { slug: params?.slug })
  
  // 服务端统一格式化日期，指定规则避免差异
  const formattedCreatedAt = new Date(post._createdAt).toLocaleString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })

  return {
    props: {
      post: {
        ...post,
        formattedCreatedAt
      },
    },
    revalidate: 60,
  }
}

然后在组件里直接使用格式化后的日期：

<p className="font-extralight text-gray-600">
  Blog post by <span className="text-yellow-600">{post.author?.name}</span> - Published
  at {post.formattedCreatedAt}
</p>

2. 延迟Formik的客户端渲染 #

让Formik在客户端hydration完成后再渲染，避免服务端与客户端的初始化差异：

import { useEffect, useState } from 'react'

const Post: React.FC<PostProps> = ({ post }) => {
  const initialValues = {
    name: '',
    email: '',
    comment: '',
  }
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    // 客户端hydration完成后标记状态
    setIsClient(true)
  }, [])

  return (
    <div className="mb-10">
      {/* 其他代码保持不变 */}
      <hr className="color bg-yellow-600 h-1 max-w-xl mx-auto mt-10 mb-5" />
      {/* 仅在客户端渲染Formik */}
      {isClient && (
        <Formik
          initialValues={initialValues}
          onSubmit={(values) => {
            alert(`${values.comment}, ${values.email}, ${values.name}`)
          }}
          validationSchema={schema}>
          {/* Form内容保持不变 */}
        </Formik>
      )}
    </div>
  )
}

如果不想延迟渲染，也可以用Suspense包裹Formik组件，让错误被边界捕获，避免整个根节点切换到客户端渲染：

import { Suspense } from 'react'

// 替换原Formik部分代码
<Suspense fallback={<div>Loading comment form...</div>}>
  <Formik
    initialValues={initialValues}
    onSubmit={(values) => {
      alert(`${values.comment}, ${values.email}, ${values.name}`)
    }}
    validationSchema={schema}>
    {/* Form内容保持不变 */}
  </Formik>
</Suspense>

3. 排查Header组件 #

如果上述修复后仍有错误，检查Header组件是否使用了window、document等客户端专属API——这类代码必须放在useEffect或客户端专属逻辑中，不能在服务端渲染阶段执行。

验证修复 #

修改完成后重启开发服务器，刷新页面：

• 确认日期文本在服务端和客户端完全一致
• 检查控制台是否还有Hydration错误提示
• 验证评论表单功能正常

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