Server component database queries in NextJS - Step-by-Step Execution

Concept Flow - Server component database queries

Start Server Component Render

↓

Run async DB Query

↓

Wait for DB Response

↓

Receive Data

↓

Render JSX with Data

↓

Send HTML to Client

↓

End

This flow shows how a Next.js server component fetches data from a database asynchronously, waits for the data, then renders the UI with that data before sending HTML to the client.

Execution Sample

NextJS

import { db } from '@/lib/db';

export default async function Users() {
  const users = await db.user.findMany();
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

This server component fetches a list of users from the database and renders them as a list.

Execution Table

Step	Action	Evaluation	Result
1	Start rendering Users component	No data yet	Component starts async function
2	Call db.user.findMany()	Await database query	Promise pending
3	Wait for DB response	DB returns user array	[{id:1, name:'Ana'}, {id:2, name:'Ben'}]
4	Map users to JSX list items	Create <li> elements	<li key=1>Ana</li>, <li key=2>Ben</li>
5	Return <ul> with list items	JSX ready	<ul><li>Ana</li><li>Ben</li></ul>
6	Send rendered HTML to client	HTML sent	Client receives user list
7	End rendering	Component done	Render complete

💡 Rendering ends after data is fetched and JSX is returned

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
users	undefined	[{id:1, name:'Ana'}, {id:2, name:'Ben'}]	Same array	Same array

Key Moments - 3 Insights

Why do we use 'await' before the database query?

Because the database query returns a promise, 'await' pauses execution until the data arrives, as shown in execution_table step 2 and 3.

Can we use client-side hooks like useState in server components?

No, server components run on the server and do not support client hooks. The data fetching and rendering happen before sending HTML, as seen in the flow.

What happens if the database query is slow?

The server component waits at step 3 until the data returns, delaying rendering but ensuring fresh data before sending HTML.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'users' after step 3?

A undefined

B Promise pending

C [{id:1, name:'Ana'}, {id:2, name:'Ben'}]

D Empty array

💡 Hint

Check the 'users' variable in variable_tracker after step 3

At which step does the component send HTML to the client?

A Step 6

B Step 5

C Step 4

D Step 7

💡 Hint

Look for 'Send rendered HTML to client' in execution_table

If we remove 'await' before the DB query, what changes in the execution?

A The component renders the list instantly

B The component immediately returns a promise, not data

C The DB query runs synchronously

D No change in behavior

💡 Hint

Consider what happens when you don't wait for a promise in async code

Concept Snapshot

Server components in Next.js can fetch data directly using async/await.
They wait for database queries to complete before rendering.
The rendered HTML with data is sent to the client.
No client-side hooks or state are used here.
This ensures fast, SEO-friendly pages with fresh data.

Full Transcript

In Next.js, server components can fetch data from a database using async functions. The component starts rendering, calls the database query with await, and pauses until the data returns. Once the data arrives, it maps the data to JSX elements and returns the full HTML. This HTML is sent to the client. The process ensures the client gets a fully rendered page with data already included. Server components do not use client hooks like useState. If the database is slow, rendering waits but the client still gets fresh data. Removing await causes the component to return a promise instead of data, breaking rendering.