从以下位置访问您的数据库
轻松使用 React Server Components

在 React Server Components 中使用 Prisma（一款更优秀的适用于 JavaScript 和 TypeScript 的 ORM）查询 MySQL、PostgreSQL、SQL Server、CockroachDB 和 MongoDB 数据库中的数据。

查看代码示例

什么是 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 用户界面的库。它用于构建运行在网络浏览器中的前端应用程序。借助 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 上探索

Client Components (传统)

在 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}