Next.js 13 不支持在单个文件中混合使用服务端渲染（SSR）和客户端渲染（CSR）逻辑；必须通过 use client 指令显式划分边界，因此客户端交互部分需独立为单独的组件文件。
next.js 13 不支持在单个文件中混合使用服务端渲染（ssr）和客户端渲染（csr）逻辑；必须通过 `use client` 指令显式划分边界，因此客户端交互部分需独立为单独的组件文件。
在 Next.js 13 的 App Router 架构中，服务端组件（Server Components）和客户端组件（Client Components）遵循严格的“水合（hydration）边界”规则：一个模块要么是纯服务端组件（默认），要么是明确标记为客户端组件（以 "use client" 开头）——二者不可共存于同一文件中。这意味着你无法在 page.tsx 中直接定义一个带状态或事件处理器（如 useRouter().back()）的按钮，同时又让其余部分保持服务端渲染。
例如，以下写法 ❌ 是非法的：
// ❌ 错误：不能在服务端组件文件中混用客户端逻辑
export default function MyPage() {
// 这里无法调用 useRouter 或处理 onClick —— 没有水合上下文
return (
<div>
<h1>静态内容（服务端渲染）</h1>
{/* 下面的按钮需要客户端能力，但当前文件无 'use client' */}
<button onClick={() => useRouter().back()}>返回</button>
</div>
);
}✅ 正确做法是将交互逻辑抽离为独立的客户端组件：
// app/my-page/back-button.tsx
"use client"; // 必须位于文件顶部第一行
import { useRouter } from "next/navigation";
export default function BackButton() {
const router = useRouter();
return <button onClick={() => router.back()}>← 返回</button>;
}然后在服务端页面中安全引用：
// app/my-page/page.tsx —— 无需 'use client'，保持纯服务端渲染
import BackButton from "./back-button";
export default function MyPage() {
return (
<div>
<h1>这是完全服务端渲染的内容</h1>
<p>首屏加载快、SEO 友好、无 JS 即可呈现。</p>
<BackButton /> {/* 客户端组件作为子组件被挂载 */}
</div>
);
}⚠️ 注意事项：
- use client 必须是文件中的第一行有效语句，前面不可有注释或空行；
- 客户端组件及其所有依赖（包括嵌套子组件）都会被打包进客户端 bundle，因此应保持轻量；
- 即使只是一个按钮，分离文件也带来明确的职责划分：服务端专注数据获取与结构渲染，客户端专注交互响应——这正是 React Server Components 设计哲学的核心。
虽然多一个文件看似冗余，但这种约束实际提升了应用的可维护性与性能可预测性。Next.js 的构建系统会自动优化：该按钮组件仅在需要交互时才水合，不影响服务端内容的流式传输与初始 HTML 输出。因此，不是“低效”，而是有意为之的架构权衡。
