Skip to content

Commit e59b526

Browse files
committed
copy(l10n): server actions
1 parent 14cda72 commit e59b526

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

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

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
---
2-
title: Server Actions
2+
title: Actions Serveur
33
canary: true
44
---
55

66
{/* FIXME:L10N */}
77

88
<Intro>
99

10-
Server Actions allow Client Components to call async functions executed on the server.
10+
Les Actions Serveur permettent aux Composants Client d'appeler des fonctions asynchrones exécutées côté serveur.
1111

1212
</Intro>
1313

1414
<InlineToc />
1515

1616
<Note>
1717

18-
#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-actions*/}
18+
#### Comment prendre en charge les Actions Serveur ? {/*how-do-i-build-support-for-server-actions*/}
1919

20-
While Server Actions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Actions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
20+
Même si les Actions Serveur dans React 19 sont stables et ne casseront pas la compatibilité entre les versions majeures, les API sous-jacentes utilisées pour implémenter les Actions Serveur au sein d'un *bundler* ou framework compatible avec les React Server Components ne suivent pas, elles, le versionnage sémantique et sont susceptibles de casser la compatibilité entre les versions mineures de React 19.x.
2121

22-
To support Server Actions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Actions in the future.
22+
Pour prendre en charge les Actions Serveur dans un *bundler* ou framework, nous vous conseillons de figer React sur une version spécifique, ou d'utiliser une version Canari. Nous allons continuer à collaborer avec les *bundlers* et frameworks pour stabiliser les API utilisées pour implémenter les Actions Serveur à l'avenir.
2323

2424
</Note>
2525

26-
When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
26+
Lorsqu'une Action Serveur est définie au moyen d'une directive `"use server"`, votre framework crée automatiquement une référence à la fonction serveur, et la passe au Composant Client. Lorsque cette fonction sera appelée côté client, React réagira en envoyant une requête au serveur pour exécuter cette fonction, et en renvoyant le résultat.
2727

28-
Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
28+
Les Actions Serveur peuvent être créées dans les Composants Serveur et passées comme props à des Composants Client, ou peuvent être directement importées et utilisées dans des Composants Client.
2929

30-
### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/}
30+
### Créer une Action Serveur à partir d'un Composant Serveur {/*creating-a-server-action-from-a-server-component*/}
3131

32-
Server Components can define Server Actions with the `"use server"` directive:
32+
Les Composants Serveur peuvent définir des Actions Serveur au moyen de la directive `"use server"` :
3333

3434
```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
35-
// Server Component
35+
// Composant Serveur
3636
import Button from './Button';
3737

3838
function EmptyNote () {
3939
async function createNoteAction() {
40-
// Server Action
40+
// Action Serveur
4141
'use server';
4242

4343
await db.notes.create();
@@ -47,24 +47,24 @@ function EmptyNote () {
4747
}
4848
```
4949

50-
When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
50+
Lorsque React affichera le Composant Serveur `EmptyNote`, il créera une référence à la fonction `createNoteAction` et passera cette référence au Composant Client `Button`. Lorsqu'on cliquera sur le bouton, React enverra la requête au serveur pour exécuter la fonction `createNoteAction` avec la référence fournie :
5151

5252
```js {5}
5353
"use client";
5454

5555
export default function Button({onClick}) {
5656
console.log(onClick);
5757
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
58-
return <button onClick={() => onClick()}>Create Empty Note</button>
58+
return <button onClick={() => onClick()}>Créer une note vide</button>
5959
}
6060
```
6161

62-
For more, see the docs for [`"use server"`](/reference/rsc/use-server).
62+
Pour en savoir plus, consultez la documentation de [`"use server"`](/reference/rsc/use-server).
6363

6464

65-
### Importing Server Actions from Client Components {/*importing-server-actions-from-client-components*/}
65+
### Importer des Actions Serveur depuis des Composants Client {/*importing-server-actions-from-client-components*/}
6666

67-
Client Components can import Server Actions from files that use the `"use server"` directive:
67+
Les Composants Client peuvent importer des Actions Serveur depuis des modules utilisant la directive `"use server"` :
6868

6969
```js [[1, 3, "createNoteAction"]]
7070
"use server";
@@ -75,7 +75,7 @@ export async function createNoteAction() {
7575

7676
```
7777

78-
When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
78+
Lorsque le *bundler* construit le Composant Client `EmptyNote`, il injecte dans le *bundle* une référence à la fonction `createNoteAction`. Lorsqu'on cliquera sur le `button`, React enverra une requête au serveur pour exécuter la fonction `createNoteAction` au moyen de la référence fournie :
7979

8080
```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
8181
"use client";
@@ -88,18 +88,18 @@ function EmptyNote() {
8888
}
8989
```
9090

91-
For more, see the docs for [`"use server"`](/reference/rsc/use-server).
91+
Pour en savoir plus, consultez la documentation de [`"use server"`](/reference/rsc/use-server).
9292

93-
### Composing Server Actions with Actions {/*composing-server-actions-with-actions*/}
93+
### Composer les Actions Serveur au moyen des Actions {/*composing-server-actions-with-actions*/}
9494

95-
Server Actions can be composed with Actions on the client:
95+
Les Actions Serveur peuvent être composées avec des Actions côté client :
9696

9797
```js [[1, 3, "updateName"]]
9898
"use server";
9999

100100
export async function updateName(name) {
101101
if (!name) {
102-
return {error: 'Name is required'};
102+
return {error: 'Le nom est requis'};
103103
}
104104
await db.users.updateName(name);
105105
}
@@ -130,21 +130,21 @@ function UpdateName() {
130130
return (
131131
<form action={submitAction}>
132132
<input type="text" name="name" disabled={isPending}/>
133-
{state.error && <span>Failed: {state.error}</span>}
133+
{state.error && <span>Échec : {state.error}</span>}
134134
</form>
135135
)
136136
}
137137
```
138138

139-
This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client.
139+
Ça vous permet d'accéder à l'état `isPending` de l'Action Serveur en l'enrobant dans une Action côté client.
140140

141-
For more, see the docs for [Calling a Server Action outside of `<form>`](/reference/rsc/use-server#calling-a-server-action-outside-of-form)
141+
Pour en savoir plus, allez lire [Appeler une Action Serveur hors d'un `<form>`](/reference/rsc/use-server#calling-a-server-action-outside-of-form).
142142

143-
### Form Actions with Server Actions {/*form-actions-with-server-actions*/}
143+
### Actions de formulaire et Actions Serveur {/*form-actions-with-server-actions*/}
144144

145-
Server Actions work with the new Form features in React 19.
145+
Les Actions Serveur peuvent interagir avec des fonctionnalités de formulaire de React 19.
146146

147-
You can pass a Server Action to a Form to automatically submit the form to the server:
147+
Vous pouvez passer une Action Serveur à un formulaire pour envoyer automatiquement le formulaire au serveur :
148148

149149

150150
```js [[1, 3, "updateName"], [1, 7, "updateName"]]
@@ -161,13 +161,13 @@ function UpdateName() {
161161
}
162162
```
163163

164-
When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
164+
Lorsque l'envoi du formulaire aura réussi, React réinitialisera automatiquement le formulaire. Vous pouvez ajouter `useActionState` pour accéder à l'état d'attente, consulter la dernière réponse connue, ou prendre en charge l'amélioration progressive.
165165

166-
For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#server-actions-in-forms).
166+
Pour en savoir plus, allez lire [Les Actions Serveur dans les formulaires](/reference/rsc/use-server#server-actions-in-forms).
167167

168-
### Server Actions with `useActionState` {/*server-actions-with-use-action-state*/}
168+
### Actions Serveur et `useActionState` {/*server-actions-with-use-action-state*/}
169169

170-
You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
170+
Vous pouvez composer des Actions Serveur avec `useActionState` pour le cas classique où vous avez juste besoin d'accéder à l'état en attente de l'action et à sa dernière réponse connue :
171171

172172
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
173173
"use client";
@@ -180,19 +180,19 @@ function UpdateName() {
180180
return (
181181
<form action={submitAction}>
182182
<input type="text" name="name" disabled={isPending}/>
183-
{state.error && <span>Failed: {state.error}</span>}
183+
{state.error && <span>Échec : {state.error}</span>}
184184
</form>
185185
);
186186
}
187187
```
188188

189-
When using `useActionState` with Server Actions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
189+
Lorsque vous utilisez `useActionState` avec des Actions Serveur, React rejoue automatiquement les envois de formulaire réalisés avant la fin de l'hydratation. Ça signifie que les utilisateurs peuvent interagir avec votre appli avant même qu'elle soit hydratée.
190190

191-
For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
191+
Pour en savoir plus, consultez la documentation de [`useActionState`](/reference/react-dom/hooks/useFormState).
192192

193-
### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
193+
### Amélioration progressive avec `useActionState` {/*progressive-enhancement-with-useactionstate*/}
194194

195-
Server Actions also support progressive enhancement with the third argument of `useActionState`.
195+
Les Actions Serveur prennent aussi en charge l'amélioration progressive grâce au troisième argument de `useActionState`.
196196

197197
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
198198
"use client";
@@ -210,6 +210,6 @@ function UpdateName() {
210210
}
211211
```
212212

213-
When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
213+
Lorsqu'un <CodeStep step={2}>permalien</CodeStep> est fourni à `useActionState`, React redirigera sur l'URL fournie si le formulaire est envoyé avant que le *bundle* JavaScript soit chargé.
214214

215-
For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
215+
Apprenez-en davantage dans la documentation de [`useActionState`](/reference/react-dom/hooks/useFormState).

0 commit comments

Comments
 (0)