Server Component

编程代码 · React/Next.js

💡 Next.js Server Component：在服务端直接查询数据库渲染页面

export default async function Page() {↵// async 函数组件：Next.js 服务端组件可以直接用 await

const data = await prisma.user.findMany();↵// 在服务端用 Prisma 查询所有用户（不暴露给客户端）

return (↵// 返回 JSX

<main className="p-8">↵// 带边距的 main 容器

{data.map(user => (↵// 用 map 遍历数据数组

<Card key={user.id} user={user} />↵// 为每个用户渲染 Card 组件，key 用于 React diff

))}↵// map 结束

</main>↵// 关闭 main

);↵// 关闭 return 括号

}// 组件结束

0 字/分0% 准确

🐵

e左手中指

ESC 暂停⌫ 退格