Next.js 13服务端组件中复用带事件处理函数组件的正确方法？

错误原因 #

Next.js 13 默认的 Page 组件是服务端组件，服务端组件的 props 需要序列化为 JSON 传递给客户端，但函数（比如事件处理器）无法被序列化。所以当你从服务端 Page 组件向子组件传递 onChange 这类函数 props 时，就会触发 Event handlers cannot be passed to Client Component props 错误。

关于在 Page 加 "use client" 的合理性 #

给 Page 顶部添加 "use client" 确实能修复错误，但这并非最优解——整个 Page 会变成客户端组件，失去服务端渲染的核心优势：更快的首屏加载、更好的 SEO、更少的客户端 JS 体积。除非你的整个页面都需要大量交互，否则不建议这么做。

你提到的组件复用模式是否可行？ #

不可行。只要 Page 是服务端组件，就不能直接传递函数类型的 props 给子组件（哪怕子组件是客户端组件）。但可以通过以下方式优化组件复用，避免“每个功能单独创建组件”的低效问题：

正确的组件复用方案 #

1. 将交互组件标记为客户端组件
   给通用交互组件（比如你的 TextArea）添加 "use client"，让它自身处理交互逻辑，服务端 Page 只传递可序列化的 props（比如初始值、配置项）：

   // TextArea.tsx
   "use client";
   
   import { useState } from 'react';
   
   type TextAreaProps = {
     initialValue?: string;
     placeholder?: string;
     rows?: number;
     // 如需和服务端交互，传递服务器动作而非回调函数
     onSubmit?: () => Promise<void>;
   };
   
   export default function TextArea({ 
     initialValue = "", 
     placeholder = "输入内容...", 
     rows = 18,
     onSubmit 
   }: TextAreaProps) {
     const [value, setValue] = useState(initialValue);
   
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
   
     // 示例：配合表单提交调用服务器动作
     const handleBlur = () => {
       onSubmit?.();
     };
   
     return (
       <textarea
         rows={rows}
         placeholder={placeholder}
         value={value}
         onChange={handleChange}
         onBlur={handleBlur}
       />
     );
   }
   

2. 服务端 Page 传递可序列化 props + 服务器动作
   服务端 Page 仍保持服务端组件特性，获取初始数据、定义服务器动作，传递给客户端组件：

   // Page.tsx
   import TextArea from './TextArea';
   
   // 服务端获取初始值
   async function getInitialContent() {
     return await fetch('your-api-url').then(res => res.text());
   }
   
   // 定义服务器动作（处理提交逻辑）
   async function saveContent() {
     'use server';
     // 这里写服务端逻辑：比如保存到数据库、调用 API 等
   }
   
   export default async function Page() {
     const initialValue = await getInitialContent();
   
     return (
       <>
         <h1>服务端渲染的标题</h1>
         <TextArea 
           initialValue={initialValue} 
           onSubmit={saveContent} 
         />
       </>
     );
   }
   

3. 抽离局部交互模块
   如果页面中只有部分区域需要交互，可以把这部分单独抽成一个客户端组件，服务端 Page 只渲染静态内容，再引入这个交互模块，这样既保留服务端渲染优势，又实现了交互复用。

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