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.