Server-side state passing in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server component?

Consider this Next.js server component that fetches data and passes it to a client component. What will be rendered on the page?

NextJS

import React from 'react';

async function fetchData() {
  return { message: 'Hello from server' };
}

export default async function Page() {
  const data = await fetchData();
  return <ClientComponent message={data.message} />;
}

function ClientComponent({ message }) {
  'use client';
  return <p>{message}</p>;
}

A Error: ClientComponent cannot be used in server component

B <p>undefined</p>

C <p>Loading...</p>

D <p>Hello from server</p>

💡 Hint

Remember that server components can pass props to client components.

The server component fetches data and passes the message prop to the client component, which renders it inside a paragraph.

❓ state_output

intermediate

What is the value of `count` after this server action runs?

In Next.js 14, server actions can update server state. Given this code, what will be the value of count after increment() is called?

NextJS

import { useState } from 'react';

let count = 0;

export async function increment() {
  count += 1;
  return count;
}

export default function Counter() {
  const [value, setValue] = useState(0);
  async function handleClick() {
    const newCount = await increment();
    setValue(newCount);
  }
  return <button onClick={handleClick}>Count: {value}</button>;
}

A undefined

B 1

C NaN

D 0

💡 Hint

Server actions can update server-side variables and return new values.

The increment function increases count by 1 and returns it, so after one call, count is 1.

📝 Syntax

advanced

Which option correctly defines a server action in Next.js 14?

Server actions in Next.js 14 must be defined with a special directive. Which option shows the correct syntax?

A export async function saveData() { "use server"; /*...*/ }

B "use client"; export async function saveData() { /*...*/ }

C "use server"; export async function saveData() { /*...*/ }

D export function saveData() { 'use client'; /*...*/ }

💡 Hint

The directive must be the first statement in the file or function.

Server actions require the "use server"; directive at the top to mark them as server-only.

🔧 Debug

advanced

Why does this server component fail to render?

Given this Next.js server component, why does it cause a runtime error?

NextJS

export default async function Page() {
  const data = await fetch('http://localhost:3000/api/data');
  const json = await data.json();
  return <p>{json.message}</p>;
}

A fetch is not available in server components without special setup

B You cannot use async functions in server components

C The component must return a string, not JSX

D json.message is undefined because API returns no message

💡 Hint

Think about how data fetching works in Next.js server components.

In Next.js server components, the global fetch is available, but if the URL is relative like '/api/data', it may cause issues because it tries to fetch from the server itself. You need to use absolute URLs or special handling.

🧠 Conceptual

expert

How does Next.js 14 handle state passing between server and client components?

Which statement best describes how Next.js 14 manages state passing between server and client components?

A Server components can pass serializable props to client components, but client components manage their own state locally

B Client components can directly modify server component state variables via hooks

C Server components and client components share the same state object automatically

D State is passed only through URL query parameters between server and client components

💡 Hint

Think about how data flows from server to client in React components.

Server components can send data as props to client components, but client components keep their own state internally. There is no shared mutable state between them.