Fetch in server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data inside a Next.js server component.

NextJS

const data = await fetch([1]);
const json = await data.json();

Drag options to blanks, or click blank then click option'

A'https://api.example.com/data'

Bfetch('https://api.example.com/data')

C'/api/data'

Daxios.get('https://api.example.com/data')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole fetch call inside fetch argument.

Using axios instead of fetch in server components.

In Next.js server components, fetch takes a URL string as argument. So you provide the URL inside fetch.

2fill in blank

medium

Complete the code to fetch JSON data with caching disabled in a server component.

NextJS

const res = await fetch('/api/data', { cache: [1] });
const data = await res.json();

Drag options to blanks, or click blank then click option'

A'no-store'

B'force-cache'

C'default'

D'reload'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which caches the response.

Not passing the cache option at all.

Using cache: 'no-store' disables caching and fetches fresh data every time in Next.js server components.

3fill in blank

hard

Fix the error in the fetch call to correctly handle a POST request in a server component.

NextJS

const res = await fetch('/api/data', { method: [1] });

Drag options to blanks, or click blank then click option'

A'PUT'

B'POST'

C'GET'

D'DELETE'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' when trying to send data.

Forgetting to specify the method.

To send data to the server, the HTTP method should be 'POST'.

4fill in blank

hard

Fill both blanks to fetch data and convert the response to JSON in a server component.

NextJS

const response = await fetch([1]);
const data = await response.[2]();

Drag options to blanks, or click blank then click option'

A'https://api.example.com/items'

B'json'

Cjson

D'text'

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around json() method call.

Passing fetch call instead of URL string.

The fetch function takes a URL string. To parse JSON from the response, call the json() method without quotes.

5fill in blank

hard

Fill all three blanks to fetch data with POST method, send JSON body, and parse JSON response in a server component.

NextJS

const res = await fetch('/api/data', {
  method: [1],
  headers: { 'Content-Type': [2] },
  body: JSON.stringify({ name: 'John' })
});
const result = await res.[3]();

Drag options to blanks, or click blank then click option'

A'POST'

B'application/json'

Cjson

D'GET'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' method when sending data.

Missing or wrong Content-Type header.

Calling json() with quotes.

Use method 'POST' to send data, set header 'Content-Type' to 'application/json' to indicate JSON body, and parse response with json() method.

Practice

1. In Next.js server components, where should you place the fetch() call to get data before rendering?

easy

A. In a separate API route only

B. Inside a client-side useEffect hook

C. Directly inside the async server component using await fetch()

D. Inside a React state hook like useState

Solution

1. Step 1: Understand server components run on the server

   Server components execute on the server before sending HTML to the browser, so data fetching happens here.

2. Step 2: Use await fetch() inside async server components

   Using await fetch() directly inside an async server component fetches data before rendering.

3. Final Answer:

   Directly inside the async server component using await fetch() -> Option C

4. Quick Check:

   Fetch in async server component = Directly inside the async server component using await fetch() [OK]

Hint: Fetch data inside async server components with await fetch() [OK]

Common Mistakes:

• Trying to fetch data inside client hooks like useEffect
• Fetching data in React state hooks which run on client
• Assuming API routes are mandatory for server component fetch

2. Which of the following is the correct syntax to fetch data inside a Next.js server component?

easy

A. const data = await fetch('https://api.example.com/data').then(res => res.json())

B. const data = fetch('https://api.example.com/data')

C. const data = await fetch('https://api.example.com/data').json()

D. const data = fetch('https://api.example.com/data').json()

Solution

1. Step 1: Use await with fetch to wait for response

   Fetch returns a promise, so use await to wait for it to resolve.

2. Step 2: Call res.json() on the response to parse JSON

   After fetch resolves, call res.json() to get the parsed data, also awaited or chained with then.

3. Final Answer:

   const data = await fetch('https://api.example.com/data').then(res => res.json()) -> Option A

4. Quick Check:

   Await fetch then parse JSON = const data = await fetch('https://api.example.com/data').then(res => res.json()) [OK]

Hint: Always await fetch and then parse JSON with res.json() [OK]

Common Mistakes:

• Forgetting to await fetch causing unresolved promises
• Calling .json() directly on fetch without awaiting response
• Using fetch without handling the response parsing

3. What will be the output of this Next.js server component code?

export default async function Page() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo = await res.json();
  return 
{JSON.stringify(todo)}
;
}

medium

A. {"userId":1,"id":1,"title":"delectus aut autem","completed":false}

B. SyntaxError because fetch cannot be used in server components

C. Empty output because data is not awaited

D. Loading spinner indefinitely because fetch is async

Solution

1. Step 1: Await fetch and parse JSON in server component

   The code correctly awaits fetch and then awaits res.json() to get the todo object.

2. Step 2: Return JSON stringified todo inside <pre> tag

   The component returns a <pre> element with the stringified todo data, so it renders the JSON text.

3. Final Answer:

   <pre>{"userId":1,"id":1,"title":"delectus aut autem","completed":false}</pre> -> Option A

4. Quick Check:

   Await fetch + JSON.stringify output =

   {"userId":1,"id":1,"title":"delectus aut autem","completed":false}

   [OK]

Hint: Await fetch and JSON parse before returning JSX [OK]

Common Mistakes:

• Expecting fetch to fail in server components
• Not awaiting fetch causing unresolved promises
• Returning raw object instead of stringified JSON

4. Identify the error in this Next.js server component fetching code:

export default function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}

medium

A. res.json() does not return a promise

B. Missing async keyword on the component function

C. fetch cannot be used in server components

D. JSX syntax error in return statement

Solution

1. Step 1: Check async usage in server component

   The component uses await but is not declared async, which causes a syntax error.

2. Step 2: Confirm fetch is allowed in server components

   Fetch is allowed in server components, so no error there. Also, res.json() returns a promise, so awaiting is correct.

3. Final Answer:

   Missing async keyword on the component function -> Option B

4. Quick Check:

   Await requires async function = Missing async keyword on the component function [OK]

Hint: Add async to function using await fetch [OK]

Common Mistakes:

• Forgetting async on function using await
• Thinking fetch is disallowed in server components
• Misunderstanding res.json() returns a promise

5. You want to fetch user data and posts in a Next.js server component and display the user's name with their post titles. Which approach correctly fetches both and renders them efficiently?

hard

A. Fetch posts first, then fetch user data inside a nested fetch call

B. Fetch user data in server component and posts in client component using useEffect

C. Fetch user and posts sequentially with two awaits, then render after both complete

D. Fetch user and posts in parallel using Promise.all inside the server component

Solution

1. Step 1: Understand parallel fetching improves performance

   Fetching user and posts in parallel with Promise.all reduces total wait time compared to sequential awaits.

2. Step 2: Use Promise.all inside async server component to fetch both

   Inside the async server component, use const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]) to fetch simultaneously.

3. Step 3: Render user name and post titles after both fetches complete

   After both promises resolve, render the data together efficiently in the server component.

4. Final Answer:

   Fetch user and posts in parallel using Promise.all inside the server component -> Option D

5. Quick Check:

   Parallel fetch with Promise.all = Fetch user and posts in parallel using Promise.all inside the server component [OK]

Hint: Use Promise.all to fetch multiple data in server components [OK]

Common Mistakes:

• Fetching data sequentially causing slower load
• Mixing client and server fetching unnecessarily
• Nesting fetch calls causing callback delays