从以下位置访问您的数据库
React 服务器组件，轻松自如

使用 Prisma 在 React 服务器组件中从 MySQL、PostgreSQL、SQL Server、CockroachDB 和 MongoDB 数据库查询数据 - JavaScript 和 TypeScript 的更佳 ORM。

什么是 Prisma？

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

查询

// 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 服务器组件如何协同工作

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

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

React 服务器组件

React 服务器组件中的 Prisma

React 服务器组件在服务器上呈现，这意味着它们可以使用 @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 服务器组件中的 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}