在Next.js中使用video标签遭遇Hydration失败错误求助

解决方案 #

方法1：添加suppressHydrationWarning属性

直接告知React忽略该video元素的hydration不匹配警告，适合确认差异不影响功能的场景：

import Video from "../src/video.mp4"

export default function Home() {
  return (
    <div>
      <video src={Video} suppressHydrationWarning />
    </div>
  )
}

方法2：延迟到客户端渲染video

通过useEffect确保video只在客户端完成hydration后渲染，完全避免服务端与客户端的HTML差异：

import { useState, useEffect } from 'react';
import Video from "../src/video.mp4"

export default function Home() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 仅在客户端执行，标记hydration完成
    setIsClient(true);
  }, []);

  return (
    <div>
      {isClient && <video src={Video} />}
    </div>
  )
}

方法3：使用动态导入禁用SSR

将video组件独立出来，通过Next.js的dynamic导入禁用服务端渲染，适合依赖浏览器API的复杂媒体组件：

1. 创建客户端专属组件../components/ClientVideo.js：

import Video from "../src/video.mp4"

export default function ClientVideo() {
  return <video src={Video} />;
}

2. 在页面中动态导入该组件：

import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端渲染
const ClientVideo = dynamic(() => import('../components/ClientVideo'), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <ClientVideo />
    </div>
  )
}

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