從以下位置存取您的資料庫
React 伺服器元件，輕鬆搞定

在 React 伺服器元件中使用 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 伺服器元件如何結合

React 是用於在 JavaScript 中建構使用者介面的熱門函式庫。它用於建構在網路瀏覽器中執行的前端應用程式。透過 React 伺服器元件，React 元件現在也可以在伺服器上呈現。React 伺服器元件可以完全存取伺服器端功能，例如檔案系統和資料庫。這就是 Prisma ORM 的用武之地：Prisma ORM 是 React 開發人員在 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}