Server state vs client state in NextJS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Server State vs Client State in Next.js

In Next.js, which of the following best describes server state compared to client state?

A Server state is data fetched and rendered on the server before sending HTML to the client, while client state is data managed and updated within the browser after page load.

B Server state is data stored only in the browser's memory, while client state is data fetched from external APIs on the server.

C Server state and client state are the same; both refer to data stored in React components on the client side.

D Server state is data that never changes, while client state is data that changes only on the server.

💡 Hint

Think about where the data lives and when it is fetched or updated.

Server state is data fetched on the server (e.g., via getServerSideProps) and sent as HTML to the client. Client state is data managed inside the browser, often with React hooks like useState, and can change without a full page reload.

❓ component_behavior

intermediate

Next.js Component Behavior with Server and Client State

Consider a Next.js page that fetches a list of products on the server and also allows users to filter products on the client. Which statement best describes how server and client state work together here?

A Filtering updates the server state directly without any client-side changes.

B Filtering triggers a full server reload to update the product list each time the user changes the filter.

C The product list is fetched on the server and passed as props; filtering happens in client state without refetching from the server.

D The product list is fetched on the client only after the page loads; server state is not used.

💡 Hint

Think about how initial data is loaded and how user interactions update the UI.

Next.js fetches the product list on the server and sends it as props. The client manages filtering locally using React state, so no extra server fetch is needed for filtering.

📝 Syntax

advanced

Identifying Server State Fetching in Next.js

Which of the following Next.js code snippets correctly fetches server state during server-side rendering?

function Page({ data }) {
  return <div>{data.message}</div>;
}

// Which data fetching method is correct?

A

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

B

export async function fetchData() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return data;
}

C

export async function getClientSideProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

D

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

💡 Hint

Look for the official Next.js data fetching method that runs on the server for every request.

getServerSideProps runs on the server on every request and fetches data to pass as props. getStaticProps runs at build time, and getClientSideProps does not exist.

🔧 Debug

advanced

Debugging Client State Update in Next.js

Given this React component in Next.js, what is the main reason the counter does not update on button click?

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    count = count + 1;
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

A The code tries to assign directly to the state variable instead of using the setter function, so React does not re-render.

B The useState hook is missing an initial value, causing the state to be undefined.

C The handleClick function is not bound to the button's onClick event properly.

D React components cannot update state inside event handlers.

💡 Hint

Remember how React state variables should be updated.

React state variables are read-only. To update state, you must call the setter function returned by useState. Direct assignment to the state variable does not trigger re-render.

❓ state_output

expert

Output of Mixed Server and Client State in Next.js

What will be the rendered output of this Next.js page after the user clicks the button once?

import { useState } from 'react';

export async function getServerSideProps() {
  return { props: { initialCount: 5 } };
}

export default function Page({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

A Count: 5

B Count: 6

C Count: 1

D Count: 0

💡 Hint

Consider the initial state from server props and what happens after clicking the button.

The initial count is 5 from server props. Clicking the button calls setCount(count + 1), so the count updates to 6 and re-renders.

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