Next.js 13 App Router中如何让SSR Footer组件使用useState？

云上老周

2026-7-7

你的核心需求是让Footer组件保持服务器端渲染（SSR）的同时，用useState实现客户端交互控制子菜单。在Next.js 13 App Router中，默认组件是Server Component，无法直接使用客户端钩子，但通过以下方式可以轻松解决：

只需在Footer组件顶部添加'use client'指令即可，原因如下：

标记为Client Component后，就能合法使用useState、onClick等客户端API；
Client Component的初始渲染依然会在服务器端完成：服务器会根据showSubmenu的初始值false生成对应HTML，发送给客户端后再完成hydrate，接管后续交互逻辑，完全满足SSR的要求。

修改后的代码示例：

'use client';

import { useState } from 'react';

const Footer = () => {
  const [showSubmenu, setShowSubmenu] = useState(false);

  return(
    <footer>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li onClick={(e)=>{
          e.preventDefault();
          setShowSubmenu(!showSubmenu); // 改为切换逻辑，优化交互体验
        }}>Item 3</li>
      </ul>

      {showSubmenu && (
        <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
          <li>Subitem 3</li>
          <li>Subitem 4</li>
        </ul>)
      }
    </footer>
  )
}

export default Footer;