Server component database queries in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this server component fetching data?

Consider this Next.js server component that fetches user data from a database and renders the user's name.

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

export default async function UserName() {
  const user = await db.user.findFirst({ where: { id: 1 } });
  return <h1>{user?.name ?? 'Guest'}</h1>;
}

If the database has a user with id 1 and name 'Alice', what will this component render?

NextJS

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

export default async function UserName() {
  const user = await db.user.findFirst({ where: { id: 1 } });
  return <h1>{user?.name ?? 'Guest'}</h1>;
}

A <h1>Guest</h1>

B <h1>Alice</h1>

C <h1>undefined</h1>

D Error: Cannot read property 'name' of undefined

💡 Hint

Think about what happens when the user is found and when it is not.

The component uses optional chaining user?.name which safely accesses the name if user exists. Since the user with id 1 exists and has name 'Alice', it renders <h1>Alice</h1>.

❓ component_behavior

intermediate

How does this server component behave with async database calls?

Given this Next.js server component:

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

export default async function ProductList() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

What happens if the database query takes a long time?

NextJS

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

export default async function ProductList() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

A The server component waits for the query before rendering the list.

B The component renders immediately with empty list and updates later.

C The component throws an error if the query is slow.

D The component renders a loading spinner automatically.

💡 Hint

Remember server components run on the server and can await data before rendering.

Server components in Next.js can use async/await to fetch data before rendering. The component waits for the database query to finish, then renders the list.

🔧 Debug

advanced

Why does this server component cause a hydration error?

Look at this server component fetching data and rendering a count:

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

export default async function Counter() {
  const count = await db.count.findFirst();
  const [value, setValue] = useState(count.value);
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

Why does this cause a hydration error in Next.js?

NextJS

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

export default async function Counter() {
  const count = await db.count.findFirst();
  const [value, setValue] = useState(count.value);
  return (
    <div>
      <p>Count: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

A Server components cannot use React hooks like useState.

B The database query returns undefined causing a crash.

C The component is missing a key prop on the button.

D The async function does not return valid JSX.

💡 Hint

Think about the difference between server and client components in Next.js.

React hooks like useState only work in client components. Server components run on the server and cannot use hooks. Using useState in a server component causes hydration errors.

📝 Syntax

advanced

Which option correctly fetches data in a Next.js server component?

Choose the correct syntax to fetch all posts from the database in a Next.js server component.

A

export default function Posts() {
  const posts = await db.post.findMany();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

B

export default async function Posts() {
  const posts = db.post.findMany();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

C

export default async function Posts() {
  const posts = await db.post.findMany();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

D

export default function Posts() {
  const posts = db.post.findMany();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

💡 Hint

Remember that await can only be used inside async functions.

Option C correctly defines an async function and uses await to get posts before rendering. Options A, B, and C misuse await or async. Option C misses await in the async function.

🧠 Conceptual

expert

Why should database queries be done in server components in Next.js?

In Next.js, why is it recommended to perform database queries inside server components rather than client components?

A Database queries in client components reduce server load by offloading work to the client.

B Client components can perform database queries faster because they run in the browser.

C Server components cannot fetch data, so queries must be done in client components.

D Server components run on the server, so queries are secure and do not expose credentials to the browser.

💡 Hint

Think about security and where code runs in Next.js.

Server components run on the server, keeping database credentials safe and preventing exposure to the client. Client components run in the browser and should not contain sensitive code like database queries.