Next.js 13中使用useEffect仍出现Hydration错误求助

问题背景 #

你用Next.js 13开发的导航组件，已标记为'use client'且通过useEffect更新时间，但仍触发Hydration错误——服务端与客户端渲染的时间文本不一致（比如服务端显示"5:43:50 PM"，客户端显示"5:43:51 PM"），导致内容校验失败。

错误原因 #

组件初始化时useState(new Date().toLocaleTimeString())会在服务端和客户端各执行一次，但服务端渲染时间与客户端hydrate时间存在几秒时差，两者生成的初始时间字符串不匹配，触发了Next.js的Hydration校验机制。

解决方案 #

1. 调整初始状态

将时间的初始状态设为空字符串，避免服务端和客户端生成不同的初始值：

const [time, setTime] = useState('')

2. 仅在客户端初始化时间

useEffect不会在服务端渲染阶段运行，首次时间更新完全交由useEffect处理，确保服务端渲染时不会输出与客户端不一致的时间内容。

3. 可选：添加加载占位（提升体验）

如果不想让时间位置空白，可以添加加载占位文本，优化用户体验。

修改后的完整代码 #

'use client'

import Link from 'next/link'
import React, { useEffect, useState } from 'react'

export default function Navigation() {
  // 初始状态设为空字符串
  const [time, setTime] = useState('')

  useEffect(() => {
    const locale = 'en'

    const updateFormattedTime = () => {
      const today = new Date()
      const formattedTime = today.toLocaleTimeString(locale, {
        day: 'numeric',
        month: 'numeric',
        year: 'numeric',
        hour: 'numeric',
        hour12: true,
        minute: 'numeric',
        timeZone: 'Asia/Kolkata'
      })
      setTime(formattedTime)
    }
    updateFormattedTime()

    const timer = setInterval(() => {
      updateFormattedTime()
    }, 60000)

    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div className="navigation">
      <Link href="/" className="head animate">
        OUTDATED
      </Link>
      <Link href="/information" className="head animate">
        Information
      </Link>
      {/* 有时间时显示，否则显示加载占位 */}
      {time ? <p className="information red">{time.replace(/\//g, ',')}</p> : <p className="information red">Loading...</p>}
    </div>
  )
}

效果说明 #

修改后，服务端渲染时时间位置会显示占位文本（或空白），客户端完成hydrate后，useEffect触发并更新正确的时间，彻底避免了服务端与客户端内容不匹配的问题，Hydration错误自然消失。

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