Access your Database from
React Server Components with Ease

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

What is Prisma?

Prisma is an open-source ORM that drastically simplifies data modeling, migrations, and data access for SQL databases in Node.js and TypeScript.

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 the experimental Server Components, React components can now be rendered on the server as well. Server Components have full access to server-side functionality, like file systems and databases. That's where Prisma comes in: Prisma is the best way for React developers to query a database in Server Components.

Prisma is an open-source ORM that's typically used in backend applications (e.g. API servers) to send queries to a database and resolve data requirements of incoming API requests. Using Prisma to query your database inside of a Server Component saves the roundtrip to the API server by directly loading the data from the database and displaying it in the UI. See the code below for an example or explore the official demo to learn how Prisma can be used in Server Components .

Server Components (Experimental)

Prisma in React Server Components

React Server Components are rendered on the server, meaning they can communicate directly with a database. Using the react-prisma package, you can use Prisma for safe and efficient database access in Server Components.

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

1export default function NoteList({searchText}) {
2 // Query all notes in the database
3 // (Prisma translates this query to SQL)
4 const notes = prisma.note.findMany({
5 where: {
6 title: {
7 contains: searchText,
8 },
9 },
10 });
11
12 // Display notes in React component
13 return notes.length > 0 ? (
14 <ul className="notes-list">
15 {notes.map((note) => (
16 <li key={note.id}>
17 <SidebarNote note={note} />
18 </li>
19 ))}
20 </ul>
21 ) : (
22 <div className="notes-empty">
23 {searchText
24 ? `Couldn't find any notes titled "${searchText}".`
25 : 'No notes created yet!'}{' '}
26 </div>
27 );
28}

React Server Components are currently an experimental feature and are not yet ready for production usage! We are collaborating with the React team to ensure that the react-prisma package will be kept up-to-date with any changes so that you can continue using it as you're exploring Server Components.

  DATABASE
   query data via SQL
  
  REACT APP
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 the react-prisma package, you can use Prisma for safe and efficient database access in Server Components.

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

1export default function NoteList({searchText}) {
2 // Query all notes in the database
3 // (Prisma translates this query to SQL)
4 const notes = prisma.note.findMany({
5 where: {
6 title: {
7 contains: searchText,
8 },
9 },
10 });
11
12 // Display notes in React component
13 return notes.length > 0 ? (
14 <ul className="notes-list">
15 {notes.map((note) => (
16 <li key={note.id}>
17 <SidebarNote note={note} />
18 </li>
19 ))}
20 </ul>
21 ) : (
22 <div className="notes-empty">
23 {searchText
24 ? `Couldn't find any notes titled "${searchText}".`
25 : 'No notes created yet!'}{' '}
26 </div>
27 );
28}

React Server Components are currently an experimental feature and are not yet ready for production usage! We are collaborating with the React team to ensure that the react-prisma package will be kept up-to-date with any changes so that you can continue using it as you're exploring Server Components.

  DATABASE
   query data via SQL
  
  REACT APP

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 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

Server Components Demo with Prisma

This is a fork of the official Server Components demo built by the React team which uses Prisma instead of plain SQL for database access.

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.

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.

Get Involved

Join the React + Prisma Community

Join us on Slack

Get help and engage with thousands of React and Prisma developers on Slack

Join Prisma Slack

Showcase on Twitter

We’d love to see what you’re building with React and Prisma

Tweet #prisma+react

Get Stickers

Show your React + Prisma love with custom free stickers

Order stickers