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.

Practice

1. Which of the following best describes server state in Next.js?

easy

A. UI component states like button clicks or form inputs.

B. Temporary data stored only in the browser memory.

C. CSS styles applied to components dynamically.

D. Data fetched from APIs or databases and shared across users.

Solution

1. Step 1: Understand server state meaning

   Server state is data that comes from the server, such as API responses or database queries, and is shared among users.

2. Step 2: Compare with client state

   Client state is local to the browser and changes instantly with user actions, unlike server state.

3. Final Answer:

   Data fetched from APIs or databases and shared across users. -> Option D

4. Quick Check:

   Server state = shared API data [OK]

Hint: Server state = shared data from backend, not local UI [OK]

Common Mistakes:

• Confusing server state with client UI state
• Thinking server state is local to one user
• Mixing server state with CSS or styling

2. Which syntax correctly uses React's useState hook for client state in Next.js?

easy

A. const [count, setCount] = useState(0)

B. const [data, setData] = useState(fetch('/api/data'))

C. const data = await fetch('/api/data')

D. const count = useState(0)

Solution

1. Step 1: Identify correct useState syntax

   useState returns an array with current state and a setter function, so destructuring with [state, setState] is correct.

2. Step 2: Check each option

   const [count, setCount] = useState(0) correctly uses const [count, setCount] = useState(0). const [data, setData] = useState(fetch('/api/data')) wrongly calls fetch inside useState. const data = await fetch('/api/data') is an async fetch, not useState. const count = useState(0) misses destructuring.

3. Final Answer:

   const [count, setCount] = useState(0) -> Option A

4. Quick Check:

   useState returns [state, setter] array [OK]

Hint: useState always destructures [value, setter] array [OK]

Common Mistakes:

• Calling async fetch inside useState
• Not destructuring useState result
• Assigning useState directly to a variable

3. Given this Next.js component, what will be displayed initially?

import { useState, useEffect } from 'react';

export default function Example() {
  const [serverData, setServerData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setServerData(data.message));
  }, []);

  return 
{serverData ?? 'Loading...'}
;
}

medium

A. undefined

B. Loading...

C. null

D. The message from /api/data immediately

Solution

1. Step 1: Check initial state value

   The state serverData starts as null, so the component shows 'Loading...' initially because of the nullish coalescing operator.

2. Step 2: Understand useEffect fetch timing

   The fetch runs after the first render, so the message from the API is not available immediately.

3. Final Answer:

   Loading... -> Option B

4. Quick Check:

   Initial state null shows fallback text [OK]

Hint: Initial null state shows fallback before fetch completes [OK]

Common Mistakes:

• Assuming fetch is synchronous and immediate
• Expecting undefined or null to render as text
• Ignoring useEffect timing

4. Identify the bug in this Next.js component that fetches server state and updates client state:

import { useState, useEffect } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState();

  useEffect(async () => {
    const res = await fetch('/api/data');
    const json = await res.json();
    setData(json);
  }, []);

  return <div>{data.message}</div>;
}

medium

A. useEffect callback cannot be async directly

B. Missing initial state value for useState

C. setData should not be called inside useEffect

D. data.message will always be undefined

Solution

1. Step 1: Check useEffect callback syntax

   React's useEffect callback cannot be async directly; it should call an async function inside.

2. Step 2: Identify correct fix

   Wrap the async fetch logic inside a separate async function inside useEffect, then call it.

3. Final Answer:

   useEffect callback cannot be async directly -> Option A

4. Quick Check:

   Async function inside useEffect, not async callback [OK]

Hint: useEffect callback must be sync; call async function inside [OK]

Common Mistakes:

• Making useEffect callback async directly
• Not handling initial undefined state safely
• Assuming data.message exists before fetch

5. You want to build a Next.js page that shows a list of products fetched from the server and allows users to filter them locally without refetching. Which approach correctly separates server state and client state?

hard

A. Store products in client state only and fetch on every filter change.

B. Fetch products inside useEffect and store in server state for filtering.

C. Fetch products with getServerSideProps and store in client state with useState for filtering.

D. Fetch products with getStaticProps and filter on server on every user input.

Solution

1. Step 1: Understand server state fetching

   Using getServerSideProps fetches data on the server before rendering, providing server state.

2. Step 2: Manage client state for filtering

   Storing the fetched products in useState allows local filtering without refetching, which is client state.

3. Final Answer:

   Fetch products with getServerSideProps and store in client state with useState for filtering. -> Option C

4. Quick Check:

   Server fetch + client filter state = Fetch products with getServerSideProps and store in client state with useState for filtering. [OK]

Hint: Fetch server data once, filter locally with client state [OK]

Common Mistakes:

• Fetching data on every filter change
• Filtering on server for every user input
• Mixing server and client state responsibilities