Why server actions simplify mutations in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server action that updates data.

NextJS

"use server";

export const updateData = async () => { await [1](); }

Drag options to blanks, or click blank then click option'

ArevalidatePath('/')

Bfetch('/api/update')

Cconsole.log('update')

DsetTimeout(() => {}, 1000)

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side fetch instead of server-side revalidation.

Logging instead of triggering data refresh.

The revalidatePath function triggers Next.js to refresh the data on the server, simplifying mutations by avoiding manual cache updates.

2fill in blank

medium

Complete the code to mark a function as a server action in Next.js.

NextJS

"use server";

export async function [1]() {
  // mutation logic
}

Drag options to blanks, or click blank then click option'

AserverAction

BupdateData

CfetchData

DclientAction

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function with client-related terms.

Omitting the "use server" directive.

Server actions must be marked with "use server" and have a proper name indicating their purpose, like serverAction.

3fill in blank

hard

Fix the error in the server action call to ensure mutation triggers revalidation.

NextJS

"use server";

async function handleSubmit() {
  await [1]();
  // missing revalidation
}

Drag options to blanks, or click blank then click option'

Afetch('/api/mutate')

BrevalidatePath('/')

CserverAction()

Dconsole.log('done')

Attempts:

3 left

💡 Hint

Common Mistakes

Only calling the mutation without revalidation.

Using console.log instead of revalidation.

After mutation, calling revalidatePath ensures the server updates the cached data, simplifying state management.

4fill in blank

hard

Fill both blanks to create a server action that updates data and triggers revalidation.

NextJS

"use server";

export async function updateItem() {
  await [1]();
  [2]('/items');
}

Drag options to blanks, or click blank then click option'

AupdateDatabase

BrevalidatePath

CfetchData

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Calling revalidation before mutation.

Using console.log instead of mutation function.

The server action calls updateDatabase to mutate data, then revalidatePath to refresh the cache for the '/items' path.

5fill in blank

hard

Fill all three blanks to define a server action that updates, revalidates, and logs success.

NextJS

"use server";

export async function saveData() {
  await [1]();
  [2]('/dashboard');
  [3]('Update complete');
}

Drag options to blanks, or click blank then click option'

AupdateRecord

BrevalidatePath

Cconsole.log

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Logging before mutation or revalidation.

Using fetchData instead of update function.

The server action updates the record, triggers revalidation for '/dashboard', and logs a success message.