Next.js SSR页面实现导航栏交互：避免全组件客户端渲染

方案一：纯原生DOM脚本（无React客户端依赖） #

直接在服务端渲染完整的导航HTML结构，包括移动端按钮和菜单，然后注入一段极简的原生JS脚本处理交互，完全不需要将任何React组件标记为客户端组件。这种方式能最大化保留SSR的加载速度优势，仅用几行脚本实现交互。

实现代码 #

服务端导航组件（无"use client"）：

// app/components/ServerNav.jsx
export default function ServerNav() {
  return (
    <nav className="nav-container">
      <div className="nav-brand">My Site</div>
      {/* 移动端切换按钮 */}
      <button id="mobile-menu-toggle" className="mobile-toggle">
        ☰
      </button>
      {/* 默认隐藏的移动端菜单 */}
      <ul id="mobile-menu" className="mobile-menu hidden">
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
      </ul>
      {/* 桌面端菜单 */}
      <ul className="desktop-menu">
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
      </ul>
    </nav>
  );
}

在根布局或页面底部注入交互脚本：

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ServerNav />
        {children}
        {/* 仅处理菜单切换的轻量脚本 */}
        <script dangerouslySetInnerHTML={{ __html: `
          const toggleBtn = document.getElementById('mobile-menu-toggle');
          const mobileMenu = document.getElementById('mobile-menu');
          if (toggleBtn && mobileMenu) {
            toggleBtn.addEventListener('click', () => {
              mobileMenu.classList.toggle('hidden');
              // 可选：切换按钮图标
              toggleBtn.textContent = mobileMenu.classList.contains('hidden') ? '☰' : '✕';
            });
          }
        `}} />
      </body>
    </html>
  );
}

方案二：拆分客户端组件（仅交互部分hydrate） #

如果想保留React的状态管理逻辑（比如用useState），可以把需要交互的按钮和关联菜单单独拆成客户端组件，导航主体仍作为服务端组件。这样只有极小一部分代码会被客户端hydrate，其余内容保持SSR。

实现代码 #

客户端交互组件（仅这部分加"use client"）：

// app/components/MobileToggleButton.jsx
'use client';

import { useState } from 'react';

export default function MobileToggleButton() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>
      <button 
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        className="mobile-toggle"
      >
        {isMenuOpen ? '✕' : '☰'}
      </button>
      <ul className={`mobile-menu ${isMenuOpen ? '' : 'hidden'}`}>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
      </ul>
    </>
  );
}

服务端导航组件（导入客户端组件）：

// app/components/ServerNav.jsx
import MobileToggleButton from './MobileToggleButton';

export default function ServerNav() {
  return (
    <nav className="nav-container">
      <div className="nav-brand">My Site</div>
      {/* 仅这一小块是客户端渲染 */}
      <MobileToggleButton />
      {/* 桌面端菜单完全由服务端渲染 */}
      <ul className="desktop-menu">
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
      </ul>
    </nav>
  );
}

总结 #

• 追求极致性能选方案一：纯原生脚本完全避免React客户端hydration开销，脚本体积可以忽略不计；
• 想保留React开发体验选方案二：拆分组件实现局部hydrate，既不影响导航主体的SSR速度，又能使用React的状态管理。

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