Server action in client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a server action is called inside a client component?

Consider a Next.js client component that calls a server action on a button click. What is the expected behavior of the component after the server action completes?

NextJS

import { useState } from 'react';
'use client';

async function addItem(data) {
  'use server';
  // Imagine this adds data to a database
  return 'Item added';
}

export default function AddItem() {
  const [message, setMessage] = useState('');

  async function handleClick() {
    const result = await addItem({ name: 'New Item' });
    setMessage(result);
  }

  return (
    <>
      <button onClick={handleClick}>Add Item</button>
      <p>{message}</p>
    </>
  );
}

A The button click triggers the server action, and the component updates the message with 'Item added' without a full page reload.

B The server action runs on the client, causing a runtime error because server code cannot run in the browser.

C The component reloads the entire page after the server action completes to update the UI.

D The server action is ignored because client components cannot call server actions.

💡 Hint

Think about how Next.js handles server actions called from client components asynchronously.

Server actions in Next.js can be called from client components as async functions. The server action runs on the server, and the client component receives the result to update its state without a full page reload.

📝 Syntax

intermediate

Identify the correct syntax to define a server action in Next.js

Which of the following code snippets correctly defines a server action that can be called from a client component?

A async function saveData() { 'use client'; /* server code */ }

B function saveData() { 'use client'; /* server code */ }

C async function saveData() { 'use server'; /* server code */ }

D function saveData() { 'use server'; /* client code */ }

💡 Hint

Server actions must be async functions with a special directive.

Server actions in Next.js are async functions that include the 'use server' directive at the top of the function body. This tells Next.js to run the function on the server.

🔧 Debug

advanced

Why does this server action call cause a runtime error in a client component?

Examine the code below. Why does calling the server action cause a runtime error in the client component?

NextJS

import { useState } from 'react';
'use client';

function deleteItem(id) {
  'use server';
  // delete logic
}

export default function DeleteButton() {
  const [deleted, setDeleted] = useState(false);

  function handleDelete() {
    deleteItem(1);
    setDeleted(true);
  }

  return <button onClick={handleDelete}>{deleted ? 'Deleted' : 'Delete'}</button>;
}

A The server action must be imported from a separate server file, not defined inline.

B The client component cannot use useState with server actions.

C The 'use server' directive is misplaced; it should be outside the function.

D The server action is called without await, so it runs on the client causing a runtime error.

💡 Hint

Consider how async server actions must be called from client components.

Server actions are async and must be awaited when called from client components. Calling them without await causes the function to run on the client, which is invalid and causes a runtime error.

❓ state_output

advanced

What is the value of 'count' after calling this server action in a client component?

Given the code below, what will be the value of 'count' displayed after clicking the button once?

NextJS

import { useState } from 'react';
'use client';

let serverCount = 0;

async function increment() {
  'use server';
  serverCount += 1;
  return serverCount;
}

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

  async function handleClick() {
    const newCount = await increment();
    setCount(newCount);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

A Count: 0

B Count: 1

C Count: NaN

D Count: undefined

💡 Hint

Think about where serverCount is stored and how server actions update it.

The serverCount variable is on the server and increments by 1 each time increment() is called. The client receives the updated count and sets it in state, so after one click, count is 1.

🧠 Conceptual

expert

Why must server actions be async functions in Next.js client components?

Select the best explanation for why server actions are defined as async functions when used in client components.

A Because server actions run on the server and communicate asynchronously with the client, so they must return promises.

B Because JavaScript requires all server-side code to be async functions.

C Because client components cannot handle synchronous functions at all.

D Because async functions automatically cache server responses in Next.js.

💡 Hint

Think about how client and server communicate in Next.js.

Server actions run on the server and are called from client components. This communication happens asynchronously over the network, so server actions must be async functions returning promises.