Node.js SSR场景下document.getElementByClassName不可用的解决方法

解决方案 #

SSR场景下所有DOM相关API（包括document.getElementsByClassName）仅能在客户端侧执行，服务端渲染阶段没有浏览器DOM环境，调用相关API必然报错，你可以按以下两种方案实现需求：

方案1：用框架状态控制菜单显隐（更推荐） #

不需要手动操作DOM，利用框架自带的事件绑定和响应式状态即可实现，所有交互逻辑默认仅在客户端触发，完全规避SSR报错问题：

• 给头部导航链接绑定onMouseEnter/onMouseLeave鼠标事件
• 声明响应式变量记录当前激活的导航项，控制对应超大菜单的显示/隐藏
• React技术栈示例代码：

import { useState } from 'react'

export default function Header() {
  // 记录当前 hover 的导航项，null 表示没有激活的菜单
  const [activeNavKey, setActiveNavKey] = useState(null)
  return (
    <header className="header">
      <nav className="nav">
        <div 
          className="nav-item"
          onMouseEnter={() => setActiveNavKey('product')}
          onMouseLeave={() => setActiveNavKey(null)}
        >
          产品系列
          {/* 只有当前导航项激活时才渲染超大菜单 */}
          {activeNavKey === 'product' && (
            <div className="mega-menu">
              超大菜单的所有内容
            </div>
          )}
        </div>
        {/* 其余导航项逻辑同上 */}
      </nav>
    </header>
  )
}

方案2：动态导入仅客户端加载的组件 #

如果你确实需要用到原生DOM操作实现特殊效果，可以把包含DOM逻辑的代码完全隔离到仅客户端加载的模块中：

1. 单独拆分MegaMenu.js组件，所有DOM操作逻辑都写在这个组件内部
2. 在头部导航组件中用框架提供的动态导入语法导入菜单组件，关闭SSR渲染选项

• Next.js 技术栈示例代码：

import dynamic from 'next/dynamic'

// 动态导入菜单组件，禁用服务端渲染
const MegaMenu = dynamic(() => import('./MegaMenu'), { ssr: false })

export default function Header() {
  return (
    <header className="header">
      <nav className="nav">
        <div className="nav-item">
          产品系列
          <MegaMenu />
        </div>
      </nav>
    </header>
  )
}

如果你使用的是其他SSR框架，只需要替换对应框架动态导入禁用SSR的API即可，核心逻辑通用：不让包含DOM操作的代码在服务端执行。

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