Fullstack frameworks, such as Next.js, Remix or SvelteKit, blur the lines between the server and the client. These frameworks also provide different patterns for fetching and mutating data on the server.

You can query your database using Prisma Client, using your framework of choice, from the server-side part of your application.

Supported frameworks

Here's a non-exhaustive list of frameworks and libraries you can use with Prisma ORM:

Fullstack app example (e.g. Next.js)

Assume you have a Prisma schema that looks similar to this:

datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}

You can now implement the logic for querying your database using Prisma Client API inside getServerSideProps, getStaticProps, API routes, or using API libraries such as and .

getServerSideProps

// (in /pages/index.tsx)
// Alternatively, you can use `getStaticProps`
// in place of `getServerSideProps`.
export const getServerSideProps = async () => {
const feed = await prisma.post.findMany({
where: {
published: true,
},
})
return { props: { feed } }
}

Next.js will pass the props to your React component where you can display the data from your database.

API Routes

// Fetch all posts (in /pages/api/posts.ts)
const prisma = new PrismaClient()
export default async function handle(req, res) {
const posts = await prisma.post.findMany({
where: {
published: true,
},
})
res.json(posts)
}

Note that you can use Prisma ORM inside of Next.js API routes to send queries to your database – with REST, GraphQL, and tRPC.

You can then fetch data and display it in your frontend.

Ready-to-run fullstack example projects

You can find several ready-to-run examples that show how to fullstack apps with Prisma Client in the repository.

TypeScript

ExampleDescription
Fullstack Next.js app using getServerSideProps & API Routes
Fullstack Next.js app using GraphQL Yoga, Pothos, & Apollo Client
Fullstack Next.js app using tRPC
Fullstack Next.js app using getServerSideProps, API Routes, &
Fullstack Remix app using actions and loaders
Fullstack Sveltekit app using actions and loaders
Fullstack Sveltekit app using API routes
Fullstack Nuxt app using API routes

JavaScript

ExampleDescription
Fullstack Next.js app using getServerSideProps & API Routes
Fullstack Sveltekit app using API routes
Fullstack Nuxt app using API routes