Back to articles
Your Next.js App Makes the Same Database Query 5 Times Per Page Load

Your Next.js App Makes the Same Database Query 5 Times Per Page Load

via Dev.to WebdevAditya Kushwah

Open your Next.js app. Navigate to any page with a few components. Now count how many times SELECT * FROM users WHERE id = ? runs. You probably don't know. Nobody does. Because every request returns 200, every component renders correctly, and your app "works." But behind that working page, the same query might be running 5 times . Once for the navbar. Once for the sidebar. Once for the main content. Once for the settings panel. And once more because React Strict Mode ran your effect twice. That's 5 identical round trips to your database for data that hasn't changed in the last 200 milliseconds. This isn't hypothetical Here's a typical Next.js API route: // app/api/user/route.ts export async function GET () { const user = await prisma . user . findUnique ({ where : { id : session . userId } }); return NextResponse . json ( user ); } Simple. Clean. Ships code review. Now here's the problem. This endpoint gets called from: Component Why it fetches /api/user Layout navbar Show the user's n

Continue reading on Dev.to Webdev

Opens in a new tab

Read Full Article
5 views

Related Articles