Next.js中Canvas的Extra attributes警告问题求助

这个警告是因为Next.js的SSR/SSG渲染机制下，服务端输出的Canvas元素没有width、height属性，但客户端运行的代码给Canvas动态添加了这两个属性，导致客户端与服务端的DOM结构不匹配，触发hydration校验警告。以下是几种可行的解决方式：

1. 仅在客户端渲染Canvas组件 #

利用Next.js的dynamic导入，让该组件跳过服务端渲染，只在客户端加载：

// 在使用MouseEffectRender的页面/组件中
import dynamic from 'next/dynamic';

const MouseEffectRender = dynamic(() => import('../components/MouseEffectRender'), {
  ssr: false,
});

服务端不会渲染该组件，自然不会出现属性不匹配的问题。

2. 客户端动态设置Canvas宽高 #

修改MouseEffectRender组件，通过useRef获取Canvas元素，在useEffect中动态设置宽高，避免服务端渲染时输出width/height属性：

import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
import { color_hover } from '../components/MouseEffect';

interface Props {
  children: ReactNode;
}

export default function MouseEffectRender({ children }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const handleMouseMove = useRef((event: React.MouseEvent<HTMLDivElement>) => {});

  handleMouseMove.current = useCallback((event) => {
    color_hover(event);
  }, []);

  useEffect(() => {
    // 客户端环境下设置Canvas宽高
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      // 可根据需求自定义宽高，比如取父容器尺寸
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }

    handleMouseMove.current = (event) => {
      color_hover(event);
    };
  }, []);

  return (
    <>
      <div className="theBall-outer">
        <div className="theBall"></div>
      </div>

      <div id="page" className="site">
        <canvas 
          ref={canvasRef}
          className="banner_canvas" 
          id="canvas_banner"
        ></canvas>
        <div className="top-title wow fadeInUp" onMouseMove={handleMouseMove.current}></div>
        {children}
      </div>
    </>
  );
};

3. 临时禁用Hydration警告（不推荐长期使用） #

如果只是快速消除警告，可给Canvas添加suppressHydrationWarning属性，让React忽略该元素的hydration差异：

<canvas 
  className="banner_canvas" 
  id="canvas_banner"
  suppressHydrationWarning={true}
></canvas>

此方法仅隐藏警告，未解决DOM不匹配的根本问题，建议仅作为临时调试方案。

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