React 18.2.0 + Next.js 13 Hydration失败问题求助

问题本质 #

Next.js的Hydration机制要求服务端渲染的HTML与客户端渲染后的DOM状态完全一致。页面加载时立即聚焦Input，会让客户端给元素添加focus状态，而服务端输出的原始HTML中不存在这个状态，直接触发Hydration校验失败。Link组件的存在会影响客户端初始化时序，让这个状态不匹配的问题更快暴露，但核心原因是服务端与客户端DOM状态不一致。

实用解决方案 #

1. 用useEffect延迟聚焦（最推荐）

useEffect仅在客户端Hydration完成后执行，延迟触发聚焦逻辑可避免服务端与客户端状态冲突：

import { useEffect, useRef } from 'react';
import Link from 'next/link';

export default function Home() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="输入内容..." />
      <Link href="/about">关于页</Link>
    </div>
  );
}

2. App Router下使用客户端组件

若用Next.js 13新的App Router，默认组件是Server Component，需给包含交互逻辑的组件加上'use client'指令，确保聚焦逻辑仅在客户端执行：

'use client';

import { useEffect, useRef } from 'react';
import Link from 'next/link';

export default function InputWithFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <Link href="/contact">联系页</Link>
    </div>
  );
}

3. 备选：用useLayoutEffect提前聚焦

如果需要在DOM更新后立即完成聚焦（时机比useEffect更早），可改用useLayoutEffect，同样仅在客户端执行，不会干扰Hydration：

import { useLayoutEffect, useRef } from 'react';
import Link from 'next/link';

export default function Home() {
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <Link href="/about">关于页</Link>
    </div>
  );
}

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