Query data from MySQL, PostgreSQL, SQL Server, CockroachDB, and MongoDB databases in React Server Components with Prisma – a better ORM for JavaScript and TypeScript.
Prisma is an open-source ORM that drastically simplifies data modeling, migrations, and data access for SQL databases in Node.js and TypeScript.
// Creating a new recordawait prisma.user.create({ firstName: “Alice”, email: “alice@prisma.io”})
id firstName email 1 Bobby bobby@tables.io2 Nilufar nilu@email.com3 Jürgen jums@dums.edu4 Alice alice@prisma.io
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 comes in: Prisma is the best way for React developers to query a database in React 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 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 title3 const notes = await prisma.note.findMany({4 where: {5 title: {6 contains: searchText,7 },8 },9 });10
11 // Display notes in React component12 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 {searchText23 ? `Couldn't find any notes titled "${searchText}".`24 : 'No notes created yet!'}{' '}25 </div>26 );27}
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 title3 const notes = await prisma.note.findMany({4 where: {5 title: {6 contains: searchText,7 },8 },9 });10
11 // Display notes in React component12 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 {searchText23 ? `Couldn't find any notes titled "${searchText}".`24 : 'No notes created yet!'}{' '}25 </div>26 );27}
Prisma makes database queries easy with a slick and intuitive API to read and write data.
Querying your database in React Server Components significantly increases performance of your app.
Prisma's declarative modeling language is simple and lets you intuitively describe your database schema.
Pairing Prisma with React ensures your app is coherently typed, from the database to your frontend.
Prisma's gives you autocompletion for database queries, great developer experience and full type safety.
Both React and Prisma have vibrant communities where you find support, fun events and awesome people.
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 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.
Get Involved
Get help and engage with thousands of React and Prisma developers on Slack
We’d love to see what you’re building with React and Prisma
Show your React + Prisma love with custom free stickers