从以下位置访问您的数据库
React Server Components

使用 Prisma 在 React Server Components 中查询 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 派上用场的地方：对于 React 开发人员来说，Prisma ORM 是在 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}