Skip to content

Commit

Permalink
docs: Improve Actions docs. (#51145)
Browse files Browse the repository at this point in the history
Adds more clarity on which pieces are Next.js only, how actions
integrate with Next.js, and details on the progressive enhancement
story.
  • Loading branch information
leerob committed Jun 12, 2023
1 parent 6b0a6f0 commit f9813ad
Showing 1 changed file with 15 additions and 1 deletion.
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.
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`.

0 comments on commit f9813ad

Please sign in to comment.