Skip to content

Commit e03b92c

Browse files
authored
[19] s/"Server Action"/"Server Function" (#7180)
* [19] s/Server Action/Server Function * Revert /blog and change redirect * Add note * Tweak note
1 parent a337719 commit e03b92c

11 files changed

+270
-260
lines changed

src/content/reference/react-dom/components/form.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,13 @@ export default function Search() {
8383

8484
</Sandpack>
8585

86-
### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/}
86+
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
8787

88-
Render a `<form>` with an input and submit button. Pass a Server Action (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
88+
Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
8989

90-
Passing a Server Action to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
90+
Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
9191

92-
You can use hidden form fields to provide data to the `<form>`'s action. The Server Action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
92+
You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
9393

9494
```jsx
9595
import { updateCart } from './lib.js';
@@ -129,7 +129,7 @@ function AddToCart({productId}) {
129129
}
130130
```
131131

132-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Action](/reference/rsc/use-server) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
132+
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
133133

134134
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
135135
To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
@@ -315,10 +315,10 @@ export default function Search() {
315315
Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
316316

317317
1. `<form>` be rendered by a [Server Component](/reference/rsc/use-client)
318-
1. the function passed to the `<form>`'s `action` prop be a [Server Action](/reference/rsc/use-server)
318+
1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
319319
1. the `useActionState` Hook be used to display the error message
320320

321-
`useActionState` takes two parameters: a [Server Action](/reference/rsc/use-server) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to displayed an error message. The value returned by the [Server Action](/reference/rsc/use-server) passed to `useActionState` will be used to update the state variable.
321+
`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
322322

323323
<Sandpack>
324324

src/content/reference/react/experimental_taintUniqueValue.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ experimental_taintUniqueValue(
192192
);
193193
```
194194

195-
Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, an error will be thrown with message you defined when you called `taintUniqueValue`.
195+
Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Function, an error will be thrown with message you defined when you called `taintUniqueValue`.
196196

197197
</DeepDive>
198198

src/content/reference/react/use.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ The `use` API returns the value that was read from the resource like the resolve
4848
#### Caveats {/*caveats*/}
4949
5050
* The `use` API must be called inside a Component or a Hook.
51-
* When fetching data in a [Server Component](/reference/rsc/use-server), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
52-
* Prefer creating Promises in [Server Components](/reference/rsc/use-server) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
51+
* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
52+
* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
5353
5454
---
5555

src/content/reference/react/useActionState.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,15 @@ function StatefulForm({}) {
5151
5252
The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
5353
54-
If used with a Server Action, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
54+
If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
5555
5656
[See more examples below.](#usage)
5757
5858
#### Parameters {/*parameters*/}
5959
6060
* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
6161
* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
62-
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server action](/reference/rsc/use-server) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
62+
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
6363
6464
{/* TODO T164397693: link to serializable values docs once it exists */}
6565
@@ -118,7 +118,7 @@ function action(currentState, formData) {
118118
119119
#### Display form errors {/*display-form-errors*/}
120120
121-
To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useActionState`.
121+
To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
122122
123123
<Sandpack>
124124
@@ -190,7 +190,7 @@ form button {
190190
191191
#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
192192
193-
The return value from a Server Action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
193+
The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
194194
195195
<Sandpack>
196196

src/content/reference/rsc/server-actions.md

Lines changed: 0 additions & 218 deletions
This file was deleted.

src/content/reference/rsc/server-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ Server Components are not sent to the browser, so they cannot use interactive AP
193193

194194
#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
195195

196-
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
196+
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
197197

198198
For more info, see the docs for [Directives](/reference/rsc/directives).
199199

0 commit comments

Comments
 (0)