Server action in client components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a server action in Next.js client components?

A server action is a special function that runs on the server but can be called directly from client components to perform tasks like data fetching or mutations securely.

intermediate

How do you define a server action for use in Next.js client components?

You define a server action by exporting an async function from a file with the special 'use server' directive. This tells Next.js to run it on the server.

intermediate

Why use server actions instead of client-side API calls?

Server actions keep sensitive logic and secrets on the server, reduce client bundle size, and simplify code by avoiding separate API routes.

beginner

Can server actions access server-only resources like databases?

Yes, server actions run on the server and can safely access databases, environment variables, and other server-only resources.

beginner

How do you call a server action from a client component?

You import the server action function into the client component and call it like a normal async function, often inside event handlers like onClick.

Where do server actions run in Next.js?

A On the server

B On the client browser

C On both client and server

D In a separate microservice

Server actions run only on the server to keep sensitive logic secure.

What directive marks a function as a server action in Next.js?

A "use strict"

B "use client"

C "use server"

D "use action"

The "use server" directive tells Next.js to treat the function as a server action.

Which of these is a benefit of server actions?

A They increase client bundle size

B They expose secrets to the client

C They run slower than client functions

D They simplify code by avoiding API routes

Server actions simplify code by letting you call server logic directly without separate API routes.

Can server actions access environment variables safely?

A No, they run on the client

B Yes, because they run on the server

C Only if exposed explicitly

D Only in development mode

Server actions run on the server and can safely access environment variables.

How do you typically trigger a server action in a client component?

A By calling it inside a React event handler

B By importing it in a server component

C By sending an HTTP request manually

D By using a special hook

You call server actions like normal async functions inside client event handlers such as onClick.

Explain what a server action is in Next.js client components and why it is useful.

Think about how server actions help keep secrets safe and simplify code.

Describe the steps to create and use a server action in a Next.js client component.

Focus on the function definition and how it is called from the client.