Next.js 13 App目录下根布局/页面用useState并保留服务端组件的方法

核心方案：隔离客户端逻辑 #

不要直接在根布局/页面添加'use client'，而是把需要useState的交互逻辑抽离成独立的客户端组件，让根布局/页面保持服务端组件身份，其他嵌套组件依然可以正常作为服务端组件使用。

具体实现步骤 #

1. 创建独立的客户端组件
   新建一个单独的组件文件（比如ClientStateComponent.tsx），顶部声明'use client'，在内部编写需要useState的逻辑：

'use client';

import { useState } from 'react';

export default function ClientStateComponent() {
  const [inputValue, setInputValue] = useState('');
  
  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容测试客户端状态"
      />
      <p>当前输入：{inputValue}</p>
    </div>
  );
}

2. 在根布局/页面（服务端组件）中引入该客户端组件
   根布局layout.tsx或根页面page.tsx无需添加'use client'，直接引入上述客户端组件，同时可以正常引入其他服务端组件：

// 根布局，默认是服务端组件，无需额外声明
import ClientStateComponent from './ClientStateComponent';
import ServerOnlyComponent from './ServerOnlyComponent'; // 这是一个服务端组件

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 引入客户端组件，仅该组件会在浏览器执行 */}
        <ClientStateComponent />
        {/* 服务端组件不受影响，依然在服务端完成渲染 */}
        <ServerOnlyComponent />
        {children}
      </body>
    </html>
  );
}

原理说明 #

• Next.js 13 App目录中，组件默认是服务端组件，只有显式添加'use client'的组件才会被标记为客户端组件。
• 服务端组件可以安全引入客户端组件，且客户端组件的存在不会影响其他嵌套服务端组件的渲染逻辑——服务端组件依然在服务端完成HTML生成，只有客户端组件会在浏览器中执行交互状态逻辑。

额外注意事项 #

• 即便根布局需要多个客户端状态逻辑，也建议拆分成多个独立的客户端组件，避免单个组件过于臃肿。
• 客户端组件只能引入其他客户端组件或无副作用的纯组件，而服务端组件可以同时兼容引入服务端和客户端组件。

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