#Server actions

1 messages · Page 1 of 1 (latest)

outer pulsar
#

How do server actions works?

potent shellBOT
#

Hi @outer pulsar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Server Actions in Next.js are asynchronous functions that are executed on the server. They can be used in both Server and Client Components to handle form submissions and data mutations in Next.js applications.

Here are some key points about Server Actions:

  • They can be invoked using the action attribute in a <form> element. Server Components support progressive enhancement by default, meaning the form will be submitted even if JavaScript hasn't loaded yet or is disabled. In Client Components, forms invoking Server Actions will queue submissions if JavaScript isn't loaded yet, prioritizing client hydration. After hydration, the browser does not refresh on form submission.
  • Server Actions are not limited to <form> and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>.
  • They integrate with the Next.js caching and revalidation architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
  • Behind the scenes, actions use the POST method, and only this HTTP method can invoke them.
  • The arguments and return value of Server Actions must be serializable by React.
  • Server Actions are functions, meaning they can be reused anywhere in your application.
  • They inherit the runtime from the page or layout they are used on.
  • They also inherit the Route Segment Config from the page or layout they are used on, including fields like maxDuration.

A Server Action can be defined with the React "use server" directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.

Here's an example of how to define a Server Action:

# 
// Server Component
export default function Page() {
 // Server Action
 async function create() {
 'use server'
 
 // ...
 }
 
 return (
 // ...
 )
}

You should treat Server Actions as you would public-facing API endpoints, and ensure that the user is authorized to perform the action.

For more information, you can check out the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@outer pulsar kapa.ai is still learning and improving, please let us know how it did by reacting below

outer pulsar
#

can a server action return data

#

@potent shell can a server action return data

potent shellBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, a Server Action can return data. The return value of a Server Action must be serializable by React. This means that the data returned by a Server Action can be used to update the UI and can also be sent to the client in a single server roundtrip.

When a Server Action is invoked, Next.js can return both the updated UI and new data. This is part of the integration of Server Actions with the Next.js caching and revalidation architecture.

Here's an example of a Server Action that fetches data and returns it:

"use server";

export async function fetchData() {
  // Fetch data from an API or database
  const data = await fetchFromAPI();

  // Return the data
  return data;
}

In this example, fetchData is a Server Action that fetches data from an API or database and returns it. The returned data can then be used in your Next.js application.

For more information, you can check out the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: