CRUD operations with Prisma in NextJS - Performance & Optimization

Performance: CRUD operations with Prisma

MEDIUM IMPACT

This affects server response time and client perceived loading speed when performing database operations.

Fetching multiple related records in a single request

NextJS

const usersWithPosts = await prisma.user.findMany({ include: { posts: true } });

Fetches users and their posts in a single optimized query, reducing database round-trips.

📈 Performance Gainsingle query, reduces server blocking and speeds up response time

Fetching multiple related records in a single request

NextJS

const users = await prisma.user.findMany();
for (const user of users) {
  user.posts = await prisma.post.findMany({ where: { userId: user.id } });
}

This triggers one database query per user, causing many sequential queries and slow response.

📉 Performance Costblocks server response for N+1 queries, increasing latency linearly with number of users

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple sequential queries (N+1 problem)	0 (server-side)	0	0	[X] Bad
Single optimized query with include/select	0 (server-side)	0	0	[OK] Good

Rendering Pipeline

Prisma CRUD operations run on the server before sending data to the client. Slow queries delay server response, increasing LCP and blocking rendering.

→Server Processing

→Network Transfer

→Client Rendering

⚠️ BottleneckServer Processing due to inefficient or multiple database queries

Core Web Vital Affected

LCP

This affects server response time and client perceived loading speed when performing database operations.

Optimization Tips

1Avoid running Prisma queries inside loops to prevent N+1 query problems.

2Use Prisma's include and select to fetch related data in a single query.

3Minimize data fetched to only what is needed to reduce response size and speed up loading.

Performance Quiz - 3 Questions

What is the main performance issue with running multiple Prisma queries inside a loop to fetch related data?

A It causes many database round-trips, increasing server response time.

B It reduces the bundle size of the client code.

C It improves caching on the client side.

D It speeds up the rendering on the client.

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by XHR/fetch, and observe the number and timing of API calls for data fetching.

What to look for: Look for multiple sequential API calls indicating N+1 queries or a single call with fast response time for optimized queries.