Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Improve Actions docs. #51145

Merged
merged 1 commit into from
Jun 12, 2023
Merged

docs: Improve Actions docs. #51145

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/02-app/01-building-your-application/03-data-fetching/04-server-actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ export default function AddToCart({ productId }) {
}
```

> **Good to know:**
>
> - Using Server Actions will opt into running the React `experimental` channel.
> - React Actions, `useOptimistic`, and `useFormStatus` are not a Next.js or React Server Components specific features.
> - Next.js integrates React Actions into the Next.js router, bundler, and caching system, including adding data mutation APIs like `revalidateTag` and `revalidatePath`.

## Convention

You can enable Server Actions in your Next.js project by enabling the **experimental** `serverActions` flag.
Expand Down Expand Up @@ -529,7 +535,13 @@ async function create(data) {

### Actions

Performs asynchronous side effects in response to user interaction, with built-in solutions for error handling and [optimistic updates](#experimental-useoptimistic). Similar to the HTML primitive [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action).
Actions are an experimental feature in React, allowing you to run `async` code in response to a user interaction.

Actions are not Next.js or React Server Components specific, however, they are not yet available in the stable version of React. When using Actions through Next.js, you are opting into using the React `experimental` channel.
leerob marked this conversation as resolved.
Show resolved Hide resolved

Actions are defined through the `action` prop on an element. Typically when building HTML forms, you pass a URL to the [`action` prop](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). With Actions, React now allows you to pass a function directly.

React also provides built-in solutions for [optimistic updates](#experimental-useoptimistic) with Actions. It's important to note new patterns are still being developed and new APIs may stil be added.

### Form Actions

Expand All @@ -543,6 +555,8 @@ Functions that run on the server, but can be called on the client.

[Server Functions](#server-functions) called as an action.

Server Actions can be progressively enhanced by passing them to a [`form` element's `action` prop](#invocation). The form is interactive before any client-side JavaScript has loaded. This means React hydration is not required for the form to submit.

### Server Mutations

[Server Actions](#server-actions) that mutates your data and calls `redirect`, `revalidatePath`, or `revalidateTag`.