SSR场景下useRef获取元素高度异常问题排查求助

我有一个通过map渲染三个子组件的React组件，为每个子组件实现了展开/收起功能。组件内使用ref回调（refCallback）获取组件完整高度，当高度超过指定阈值时，就缩小高度并显示展开按钮。该功能在React路由内导航时正常，但直接通过SSR打开页面时，最后一个子组件的ref.current.clientHeight返回值小于实际DOM高度。

用到的refCallback代码如下：

const cb = (node: Div) => {
  if (node !== null) {
        const height = parseInt(getComputedStyle(node).height);
        // 阈值判断逻辑，用来设置div高度
  }
}

1. SSR渲染时DOM与样式未完全就绪 #

SSR环境下，页面CSS可能未完全加载或应用，尤其是使用CSS-in-JS、异步样式时，最后一个组件的计算高度可能基于未完全渲染的样式（比如字体未加载、内外边距未生效），导致getComputedStyle拿到的高度不准。

解决办法：

• 将高度计算逻辑移至useEffect中执行，确保DOM和样式都渲染完成：

  useEffect(() => {
    if (ref.current) {
      const height = parseInt(getComputedStyle(ref.current).height);
      // 阈值处理逻辑
    }
  }, []);
  

• 若使用CSS-in-JS方案（如Styled Components），确保SSR时样式已注入页面，避免客户端水合时样式突变。

2. 最后一个组件存在异步加载内容 #

如果最后一个子组件包含异步加载的内容（如接口数据、懒加载图片），SSR时这些内容尚未渲染，ref回调触发时拿到的是空状态下的高度；客户端水合后内容加载完成，实际高度变大，但ref回调未重新触发。

解决办法：

• 监听内容依赖的状态变化，在状态更新后重新计算高度：

  useEffect(() => {
    if (ref.current && data) { // data为异步加载的内容
      const height = parseInt(getComputedStyle(ref.current).height);
      // 阈值处理逻辑
    }
  }, [data]); // 依赖data，数据更新时重新计算
  

• 针对图片，监听load事件，图片加载完成后再计算高度：

  const handleImageLoad = () => {
    if (ref.current) {
      const height = parseInt(getComputedStyle(ref.current).height);
      // 阈值处理逻辑
    }
  };
  // 在子组件的img标签上绑定：onLoad={handleImageLoad}
  

3. ref回调触发时机早于DOM水合完成 #

SSR水合过程中，React的ref回调可能在DOM挂载但未完成水合时触发，最后一个组件因渲染顺序问题，水合完成时间晚于ref回调执行时间，导致高度计算不准确。

解决办法：

• 使用requestAnimationFrame延迟计算，确保DOM完全渲染：

  const cb = (node: Div) => {
    if (node !== null) {
      requestAnimationFrame(() => {
        const height = parseInt(getComputedStyle(node).height);
        // 阈值处理逻辑
      });
    }
  };
  

• 或结合useLayoutEffect，它会在DOM更新后同步执行，确保DOM已完成更新：

  const [ref, setRef] = useState<Div | null>(null);
  
  useLayoutEffect(() => {
    if (ref) {
      const height = parseInt(getComputedStyle(ref).height);
      // 阈值处理逻辑
    }
  }, [ref]);
  
  // 将setRef作为ref回调传入子组件
  

4. SSR与客户端布局存在差异 #

SSR渲染时，父元素的布局可能与客户端水合后的布局不一致，比如父元素在SSR时被设置了固定高度、溢出隐藏等，导致最后一个子组件被压缩，getComputedStyle拿到的是被压缩后的高度；客户端水合后父元素布局恢复正常，子组件实际高度变大。

解决办法：

• 检查父组件CSS样式，确保SSR与客户端布局一致，避免父元素在SSR时出现限制子元素高度的设置。
• 给父组件也添加ref，确认SSR时父元素的高度是否符合预期。

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