Access your Database from
React Server Components with Ease

Query data from MySQL, PostgreSQL, SQL Server, CockroachDB, and MongoDB databases in React Server Components with Prisma – a better ORM for JavaScript and TypeScript.

tech

What is Prisma?

Prisma makes working with data easy! It offers a type-safe Node.js & TypeScript ORM, global database caching, connection pooling, and real-time database events.

Query
// Creating a new record
await prisma.user.create({
firstName: “Alice”,
email: “alice@prisma.io”
})
Table
id firstName email
1 Bobby bobby@tables.io
2 Nilufar nilu@email.com
3 Jürgen jums@dums.edu
4 Alice alice@prisma.io

How Prisma and React Server Components fit together

React is a popular library for building user interfaces in JavaScript. It is used to build frontend applications that run in web browsers. With React Server Components, React components can now be rendered on the server as well. React Server Components have full access to server-side functionality, like file systems and databases. That's where Prisma ORM comes in: Prisma ORM is the best way for React developers to query a database in React Server Components.

You can also supercharge usage of Prisma ORM with our additional tools:
Prisma Accelerate is a global database cache and scalable connection pool that speeds up your database queries.
Prisma Pulse enables you to build reactive, real-time applications in a type-safe manner. Pulse is the perfect companion to implement GraphQL subscriptions or live queries.

React Server Components

Prisma in React Server Components

React Server Components are rendered on the server, meaning they can communicate directly with a database using @prisma/client for safe and efficient database access.

Prisma provides a developer-friendly API for constructing database queries. Under the hood, it generates the required query and sends them to the database.

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}
React Server Components
Client Components (Traditional)

Prisma in React Server Components

React Server Components are rendered on the server, meaning they can communicate directly with a database using @prisma/client for safe and efficient database access.

Prisma provides a developer-friendly API for constructing database queries. Under the hood, it generates the required query and sends them to the database.

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}
React Server Components

Why Prisma and React Server Components?

No SQL required

Prisma makes database queries easy with a slick and intuitive API to read and write data.

Better performance

Querying your database in React Server Components significantly increases performance of your app.

Intuitive data modeling

Prisma's declarative modeling language is simple and lets you intuitively describe your database schema.

End-to-end type safety

Pairing Prisma with React ensures your app is coherently typed, from the database to your frontend.

Higher productivity

Prisma's gives you autocompletion for database queries, great developer experience and full type safety.

Helpful communities

Both React and Prisma have vibrant communities where you find support, fun events and awesome people.

Featured Prisma & React Community Examples

How to Build a Fullstack App with React (Next.js) & Prisma

This guide is a thorough introduction to building production-ready fullstack apps using React (via Next.js), Prisma and PostgreSQL. It includes authentication via NextAuth.js and deployment via Vercel.

RedwoodJS

RedwoodJS is a fullstack application framework. Built on React, GraphQL, and Prisma, it works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.