## 问题描述 PrismaClient 无法在浏览器环境运行。当将页面组件改为 Client Component ("use client") 并直接使用 prisma 查询数据库时出现错误： ``` Error: PrismaClient is unable to run in this browser environment ``` ## 根本原因 PrismaClient 设计为仅在服务端执行，无法被打包到浏览器中运行。 ## 解决方案 采用 Server/Client Component 分离模式： 1. Server Component (page.tsx) 使用 Server Actions 获取数据 2. Client Component (Client.tsx) 负责状态管理和交互逻辑 3. 数据通过 props 从 Server 传递到 Client ## 关键代码示例 ```tsx // page.tsx - Server Component import { getProjectWithDetails } from "@/server/actions/project"; export default async function ProjectDetailPage({ params }) { const project = await getProjectWithDetails(params.id); return <ProjectDetailClient project={project} />; } // ProjectDetailClient.tsx - Client Component "use client"; export default function ProjectDetailClient({ project }) { const [tasks, setTasks] = useState(project.tasks); } ``` ## 注意事项 - 所有 Prisma 查询必须在 Server Actions 或 Server Component 中执行 - Client Component 只能通过 props 接收数据，不能直接访问数据库