Why database access matters in NextJS - Performance Evidence

Performance: Why database access matters

HIGH IMPACT

Database access affects page load speed by delaying server response and can block rendering of dynamic content.

Fetching user data on page load

NextJS

import { cache } from 'react';
const getUser = cache(async () => {
  return await db.query('SELECT * FROM users WHERE id = 1');
});
export default async function Page() {
  const user = await getUser();
  return <div>{user.name}</div>;
}

Caching the database call reduces repeated queries and speeds up server response.

📈 Performance GainReduces repeated DB calls, cutting server response time and LCP by up to 50%

Fetching user data on page load

NextJS

export default async function Page() {
  const user = await db.query('SELECT * FROM users WHERE id = 1');
  return <div>{user.name}</div>;
}

This fetches data directly on every request without caching or batching, causing slow server response.

📉 Performance CostBlocks server response for each request, increasing LCP by 200-500ms depending on DB speed

Performance Comparison

Pattern	DB Calls	Server Response Delay	LCP Impact	Verdict
Direct DB call on every request	Many	High (200-500ms)	High delay	[X] Bad
Cached DB call with batching	Few	Low (<100ms)	Minimal delay	[OK] Good

Rendering Pipeline

Database access happens on the server before HTML is sent. Slow DB queries delay server response, blocking the browser from starting rendering.

→Server Data Fetching

→HTML Generation

→First Paint

⚠️ BottleneckServer Data Fetching (waiting for DB query)

Core Web Vital Affected

LCP

Database access affects page load speed by delaying server response and can block rendering of dynamic content.

Optimization Tips

1Minimize database calls during server rendering to reduce server response time.

2Use caching and batching to avoid repeated database queries.

3Monitor server response time (TTFB) to detect slow database access.

Performance Quiz - 3 Questions

How does slow database access affect page load?

A It only affects client-side rendering speed.

B It delays server response and increases Largest Contentful Paint (LCP).

C It improves page load by preloading data.

D It has no impact on page load speed.

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Look for server response time (TTFB) on main document request.

What to look for: High TTFB indicates slow server response often caused by slow DB access.