API routes vs server actions decision in NextJS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to prefer Server Actions over API Routes in Next.js?

In Next.js 14+, you want to handle a form submission that updates user data and immediately reflects changes on the page without extra client-side fetching. Which approach is best?

A Use static generation with incremental static regeneration to update user data.

B Use an API route to handle the form submission, then fetch updated data on the client.

C Use client-side fetch to call an external API and update state manually.

D Use a Server Action to handle the form submission directly, allowing immediate server-side updates and UI refresh.

💡 Hint

Think about how Server Actions can simplify server communication and UI updates without extra client fetches.

Server Actions allow direct server-side handling of events like form submissions, enabling immediate UI updates without separate client fetches. API routes require client fetch calls and extra state management.

❓ component_behavior

intermediate

What happens when a Server Action throws an error?

Consider a Server Action in Next.js that throws an error during execution. What is the expected behavior in the client component that called it?

A The error is thrown back to the client, and you must handle it explicitly to show feedback.

B The error causes the entire page to crash with no recovery.

C The error is caught and displayed automatically in the UI without extra code.

D The Server Action retries automatically until it succeeds.

💡 Hint

Think about error handling responsibility in Server Actions.

Server Actions throw errors back to the client, but you must catch and handle them explicitly in your component to show user-friendly messages or fallback UI.

📝 Syntax

advanced

Identify the correct Server Action syntax in Next.js 14+

Which of the following code snippets correctly defines a Server Action in Next.js 14+?

NextJS

export async function updateUser(data) {
  'use server';
  // update logic
}

A export async function updateUser(data) { 'use server'; /* update logic */ }

B export async function updateUser(data) { 'use client'; /* update logic */ }

C export async function updateUser(data) { /* update logic */ }

D export function updateUser(data) { 'use server'; /* update logic */ }

💡 Hint

Server Actions require a special directive to mark them as server-only.

The 'use server' directive inside an async function marks it as a Server Action. 'use client' is for client components. Omitting 'use server' means it's not a Server Action.

🔧 Debug

advanced

Why does this API route not update the database?

You have this Next.js API route code:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;
    updateDatabase(data);
    res.status(200).json({ success: true });
  } else {
    res.status(405).end();
  }
}

Why might the database not update as expected?

A Because req.body is undefined in API routes by default.

B Because updateDatabase is asynchronous but not awaited, so the response ends before update completes.

C Because the API route must be named api.js to work.

D Because res.status(200) must be called after res.json.

💡 Hint

Consider asynchronous function calls and response timing.

Not awaiting the async updateDatabase call means the response is sent before the update finishes, possibly causing incomplete updates.

❓ state_output

expert

What is the rendered output after this Server Action updates state?

Given this React Server Component with a Server Action that updates a counter:

import { useState } from 'react';

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

  async function increment() {
    'use server';
    setCount(count + 1);
  }

  return (
    

      
Count: {count}
      
    
  );
}

What will the user see after clicking Increment once?

A Count: 0 (no change)

B Count: 1

C An error because setCount cannot be used in Server Actions

D Count increments but resets to 0 on every render

💡 Hint

Think about React state and Server Actions interaction.

React state hooks like useState cannot be used inside Server Actions. Server Actions run on the server and cannot directly update client state. This causes an error.