Server state vs client state in NextJS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch server state data in a Next.js Server Component.

NextJS

export default async function Page() {
  const data = await fetch('/api/data').then(res => res.[1]())
  return <div>{JSON.stringify(data)}</div>
}

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

Ajson

Btext

Cblob

Dhtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes data to be a string, not an object.

The json() method parses the response as JSON, which is typical for server state fetched from APIs.

2fill in blank

medium

Complete the code to update client state using React's useState hook.

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount([1])}>{count}</button>
}

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

Acount - 1

B0

Ccount + 1

Dcount * 2

Attempts:

3 left

💡 Hint

Common Mistakes

Setting count to 0 resets the counter every click.

To increment the count on each click, we update state by adding 1 to the current count.

3fill in blank

hard

Fix the error in this client component that fetches server state incorrectly.

NextJS

import { useEffect, useState } from 'react';

export default function Data() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(json => setData([1]));
  }, []);
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

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

Ajson

BsetData

Cdata

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable itself instead of the new data.

The fetched JSON data is passed to setData to update the client state correctly.

4fill in blank

hard

Fill both blanks to create a client component that fetches server state and updates client state.

NextJS

import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([1]);
  useEffect(() => {
    fetch('/api/users').then(res => res.[2]()).then(data => setUsers(data));
  }, []);
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

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

A[]

Bjson

Cnull

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Initializing with null causes errors when mapping over users.

Initialize client state with an empty array to map over, and parse the fetch response as JSON.

5fill in blank

hard

Fill all three blanks to correctly fetch server state in a Server Component and pass it as client state to a Client Component.

NextJS

import ClientComponent from './ClientComponent';

export default async function ServerComponent() {
  const data = await fetch('/api/items').then(res => res.[1]());
  return <ClientComponent initialData=[2] />;
}

// ClientComponent.js
import { useState } from 'react';
export default function ClientComponent({ initialData }) {
  const [items, setItems] = useState([3]);
  return <div>{items.length} items loaded</div>;
}

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

Ajson

Bdata

CinitialData

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong prop names or initializing state with null causes errors.

The server fetches JSON data, passes it as initialData prop, and the client initializes state with that prop.