从以下位置访问您的数据库
React Server Components，轻松搞定

在 React Server Components 中使用 Prisma 查询来自 MySQL、PostgreSQL、SQL Server、CockroachDB 和 MongoDB 数据库的数据——这是一款更出色的 JavaScript 和 TypeScript ORM。

查看代码示例

什么是 Prisma？

Prisma 让数据处理变得轻松！它提供类型安全的 Node.js 和 TypeScript ORM、全局数据库缓存、连接池和实时数据库事件。

开始使用 Prisma

查询

// Creating a new record
await prisma.user.create({
  firstName: “Alice”,
  email: “alice@prisma.io”
})

表格

id  firstName    email  
1   Bobby        bobby@tables.io
2   Nilufar      nilu@email.com
3   Jürgen       jums@dums.edu
4   Alice        alice@prisma.io

Prisma 和 React Server Components 如何协同工作

React 是一个流行的 JavaScript 库，用于构建用户界面。它用于构建在 Web 浏览器中运行的前端应用程序。借助 React Server Components，React 组件现在也可以在服务器上渲染。React Server Components 可以完全访问服务器端功能，例如文件系统和数据库。这就是 Prisma ORM 的用武之地：Prisma ORM 是 React 开发者在 React Server Components 中查询数据库的最佳方式。

您还可以使用我们的其他工具来增强 Prisma ORM 的使用体验
• Prisma Accelerate 是一种全局数据库缓存和可扩展连接池，可加速您的数据库查询。
• Prisma Pulse 使您能够以类型安全的方式构建反应式实时应用程序。Pulse 是实现 GraphQL 订阅或实时查询的完美伴侣。

React Server Components

React Server Components 中的 Prisma

React Server Components 在服务器上渲染，这意味着它们可以使用 @prisma/client 直接与数据库通信，以实现安全高效的数据库访问。

Prisma 提供了一个开发者友好的 API，用于构建数据库查询。在底层，它生成所需的查询并将其发送到数据库。

1export default function NoteList({searchText}) {
2  // Query all notes in the database containing the searchText in the title
3  const notes = await prisma.note.findMany({
4    where: {
5      title: {
6        contains: searchText,
7      },
8    },
9  });
10
11  // Display notes in React component
12  return notes.length > 0 ? (
13    <ul className="notes-list">
14      {notes.map((note) => (
15        <li key={note.id}>
16          <SidebarNote note={note} />
17        </li>
18      ))}
19    </ul>
20  ) : (
21    <div className="notes-empty">
22      {searchText
23        ? `Couldn't find any notes titled "${searchText}".`
24        : 'No notes created yet!'}{' '}
25    </div>
26  );
27}

在 GitHub 上探索

客户端组件（传统）

React Server Components 中的 Prisma

1export default function NoteList({searchText}) {
2  // Query all notes in the database containing the searchText in the title
3  const notes = await prisma.note.findMany({
4    where: {
5      title: {
6        contains: searchText,
7      },
8    },
9  });
10
11  // Display notes in React component
12  return notes.length > 0 ? (
13    <ul className="notes-list">
14      {notes.map((note) => (
15        <li key={note.id}>
16          <SidebarNote note={note} />
17        </li>
18      ))}
19    </ul>
20  ) : (
21    <div className="notes-empty">
22      {searchText
23        ? `Couldn't find any notes titled "${searchText}".`
24        : 'No notes created yet!'}{' '}
25    </div>
26  );
27}