データベースにアクセス
React Server Componentsで簡単に

React Server ComponentsでMySQL、PostgreSQL、SQL Server、CockroachDB、MongoDBデータベースからPrismaを使ってデータクエリを実行 – 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でユーザーインターフェースを構築するための人気のあるライブラリです。ウェブブラウザで動作するフロントエンドアプリケーションを構築するために使用されます。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}