diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index b118e9ed7..4f8ad644c 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -45,13 +45,15 @@ const thumbsDownIcon = ( ); function sendGAEvent(isPositive: boolean) { + const category = isPositive ? 'like_button' : 'dislike_button'; + const value = isPositive ? 1 : 0; // Fragile. Don't change unless you've tested the network payload // and verified that the right events actually show up in GA. // @ts-ignore gtag('event', 'feedback', { - event_category: 'button', + event_category: category, event_label: window.location.pathname, - value: isPositive ? 1 : 0, + event_value: value, }); } diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 180ded867..8ab329eec 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -77,7 +77,7 @@ export function SidebarLink({ {title}{' '} {canary && ( )} diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 1db966082..c9f68c5d1 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -243,7 +243,7 @@ function Illustration({ src={src} alt={alt} style={{maxHeight: 300}} - className="bg-white rounded-lg" + className="rounded-lg" /> {caption ? (
@@ -275,7 +275,12 @@ function IllustrationBlock({ const images = imageInfos.map((info, index) => (
- {info.alt} + {info.alt}
{info.caption ? (
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 076a38be9..c0643556b 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -34,7 +34,7 @@ function PageHeading({ {title} {canary && ( )} diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 7ecbd4084..019081154 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -28,7 +28,7 @@ Nous collaborons avec Vercel et Shopify pour unifier la prise en charge de *bund ## Chargement de ressources {/*asset-loading*/} -À l'heure actuelle, les ressources telles que les scripts, styles externes, fontes et images sont généralement pré-chargées ou chargées au moyen de systèmes extérieurs. Ça peut s'avérer délicat à coordonner entre des environnements tels que le streaming, les composants serveur et d'autres encore. +À l'heure actuelle, les ressources telles que les scripts, styles externes, fontes et images sont généralement pré-chargées ou chargées au moyen de systèmes extérieurs. Ça peut s'avérer délicat à coordonner entre des environnements tels que le streaming, les Composants Serveur et d'autres encore. Nous explorons la possibilité d'ajouter des API pour précharger ou charger des ressources externes dédoublonnées au travers de React, pour fonctionner dans tous les environnements React. diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 136339917..3cc51f33e 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -83,7 +83,7 @@ Si vous n’êtes toujours pas convaincu·e, ou si votre appli a des contraintes ## Frameworks React expérimentaux {/*bleeding-edge-react-frameworks*/} -Alors que nous cherchions comment continuer à améliorer React, nous avons réalisé que l’intégration plus étroite de React avec les frameworks (en particulier avec la gestion de routes, le *bundling* et les traitements côté serveur) constitue notre plus grande opportunité d’aider les utilisateurs de React à construire de meilleures applis. L’équipe Next.js a accepté de collaborer avec nous sur la recherche, le développement, l’intégration et les tests de fonctionnalités React de pointe, indépendantes toutefois d'un framework spécifique, comme les [composants serveur React](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). +Alors que nous cherchions comment continuer à améliorer React, nous avons réalisé que l’intégration plus étroite de React avec les frameworks (en particulier avec la gestion de routes, le *bundling* et les traitements côté serveur) constitue notre plus grande opportunité d’aider les utilisateurs de React à construire de meilleures applis. L’équipe Next.js a accepté de collaborer avec nous sur la recherche, le développement, l’intégration et les tests de fonctionnalités React de pointe, indépendantes toutefois d'un framework spécifique, comme les [Composants Serveur React](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). Ces fonctionnalités se rapprochent chaque jour un peu plus de la production, et nous discutons avec d’autres équipes de *bundlers* et de frameworks pour les intégrer. Nous espérons que d’ici un an ou deux, tous les frameworks listés sur cette page auront une prise en charge complète de ces fonctionnalités. (Si vous êtes en charge d'un framework et intéressé·e par un partenariat avec nous pour expérimenter ces fonctionnalités, n’hésitez pas à nous le faire savoir !) @@ -97,9 +97,9 @@ Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer u #### Quelles sont les fonctionnalités qui composent la vision d'architecture full-stack de l'équipe React ? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Le *bundler* dans l'App Router de Next.js implémente entièrement la [spécification officielle des composants serveurs React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Ça vous permet de mélanger des composants exécutés au *build*, côté serveur et interactivement côté client dans une seule et même arborescence React. +Le *bundler* dans l'App Router de Next.js implémente entièrement la [spécification officielle des Composants Serveurs React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Ça vous permet de mélanger des composants exécutés au *build*, côté serveur et interactivement côté client dans une seule et même arborescence React. -Par example, vous pouvez écrire un composant serveur React en tant que fonction `async` qui lit à partir d’une base de données ou d’un fichier. Vous pouvez alors transmettre ces données aux composants interactifs côté client : +Par example, vous pouvez écrire un Composant Serveur React en tant que fonction `async` qui lit à partir d’une base de données ou d’un fichier. Vous pouvez alors transmettre ces données aux composants interactifs côté client : ```js // Ce composant s’exécute *seulement* côté serveur (ou pendant le build). @@ -125,6 +125,6 @@ L’App Router de Next.js intègre également [le chargement de données avec Su ``` -Les composants serveur et Suspense sont des fonctionnalités de React plutôt que de Next.js. Cependant, leur adoption au niveau du framework nécessite une adhésionet un travail d’implémentation significatif. Pour l’instant, l’App Router de Next.js en propose l’implémentation la plus complète. L’équipe React travaille avec les équipes de *bundlers* pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks. +Les Composants Serveur et Suspense sont des fonctionnalités de React plutôt que de Next.js. Cependant, leur adoption au niveau du framework nécessite une adhésionet un travail d’implémentation significatif. Pour l’instant, l’App Router de Next.js en propose l’implémentation la plus complète. L’équipe React travaille avec les équipes de *bundlers* pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks. diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index d4cb1c9db..3721ba320 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -90,13 +90,13 @@ export default function Search() { -### Gérer l'envoi de formulaire dans une action serveur {/*handle-form-submission-with-a-server-action*/} +### Gérer l'envoi de formulaire dans une Action Serveur {/*handle-form-submission-with-a-server-action*/} -Affichez un `
` avec un champ de saisie et un bouton d'envoi, puis passez-lui une action serveur (une fonction dotée de la directive [`'use server'`](/reference/react/use-server)) *via* sa prop `action` pour exécuter cette fonction quand le formulaire sera envoyé. +Affichez un `` avec un champ de saisie et un bouton d'envoi, puis passez-lui une Action Serveur (une fonction dotée de la directive [`'use server'`](/reference/react/use-server)) *via* sa prop `action` pour exécuter cette fonction quand le formulaire sera envoyé. -Passer une action serveur à `` permet aux utilisateurs d'envoyer le formulaire même sans JavaScript activé, ou avant que le code JavaScript ne soit chargé et exécuté. C'est bien pratique pour les utilisateurs ne disposant que d'une connexion ou d'un appareil lents, ou qui ont JavaScript désactivé. C'est d'ailleurs un comportement similaire à celui des formulaires dont la prop `action` contient une URL. +Passer une Action Serveur à `` permet aux utilisateurs d'envoyer le formulaire même sans JavaScript activé, ou avant que le code JavaScript ne soit chargé et exécuté. C'est bien pratique pour les utilisateurs ne disposant que d'une connexion ou d'un appareil lents, ou qui ont JavaScript désactivé. C'est d'ailleurs un comportement similaire à celui des formulaires dont la prop `action` contient une URL. -Vous pouvez utiliser des champs cachés pour fournir des données à l'action du ``. L'action serveur récupèrera ces données de champs cachés au moyen d'une instance de [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData). +Vous pouvez utiliser des champs cachés pour fournir des données à l'action du ``. L'Action Serveur récupèrera ces données de champs cachés au moyen d'une instance de [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData). ```jsx import { updateCart } from './lib.js'; @@ -136,7 +136,7 @@ function AddToCart({productId}) { } ``` -Lorsqu'un `` fait son rendu au sein d'un [composant côté serveur](/reference/react/use-client), et qu'en prime une [action serveur](/reference/react/use-server) est passée à la prop `action` du ``, le formulaire bénéficie d'une [amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement). +Lorsqu'un `` fait son rendu au sein d'un [Composant Serveur](/reference/react/use-client), et qu'en prime une [Action Serveur](/reference/react/use-server) est passée à la prop `action` du ``, le formulaire bénéficie d'une [amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement). ### Afficher un état d'attente pendant l'envoi du formulaire {/*display-a-pending-state-during-form-submission*/} @@ -324,11 +324,11 @@ export default function Search() { Afin d'afficher un message d'erreur d'envoi de formulaire avant même que le *bundle* JavaScript soit chargé et exécuté (à des fins d'amélioration progressive), plusieurs choses sont nécessaires : -1. le `` doit figurer dans un [composant côté serveur](/reference/react/use-client) -2. la fonction passée à la prop `action` du `` doit être une [action serveur](/reference/react/use-server) +1. le `` doit figurer dans un [Composant Serveur](/reference/react/use-client) +2. la fonction passée à la prop `action` du `` doit être une [Action Serveur](/reference/react/use-server) 3. le Hook `useFormState` doit être utilisé pour produire le message d'erreur -`useFormState` accepte deux arguments : une [action serveur](/reference/react/use-server) et un état initial. `useFormState` renvoie deux valeurs : une variable d'état et une action. L'action ainsi renvoyée par `useFormState` doit être passée à la prop `action` du formulaire. La variable d'état renvoyée par `useFormState` peut être utilisée pour afficher le message d'erreur. La valeur renvoyée par [l'action serveur](/reference/react/use-server) passée à `useFormState` sera utilisée pour mettre à jour la variable d'état. +`useFormState` accepte deux arguments : une [Action Serveur](/reference/react/use-server) et un état initial. `useFormState` renvoie deux valeurs : une variable d'état et une action. L'action ainsi renvoyée par `useFormState` doit être passée à la prop `action` du formulaire. La variable d'état renvoyée par `useFormState` peut être utilisée pour afficher le message d'erreur. La valeur renvoyée par [l'Action Serveur](/reference/react/use-server) passée à `useFormState` sera utilisée pour mettre à jour la variable d'état. diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md index c8923f7cc..601bcd250 100644 --- a/src/content/reference/react-dom/hooks/useFormState.md +++ b/src/content/reference/react-dom/hooks/useFormState.md @@ -51,7 +51,7 @@ function StatefulForm({}) { L'état de formulaire est déterminé par la valeur renvoyée par l'action lors du dernier envoi en date du formulaire. Si le formulaire n'a pas encore été envoyé, il équivaut à l'état initial que vous avez fourni. -Lorsque vous l'utilisez dans une action serveur, `useFormState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée. +Lorsque vous l'utilisez dans une Action Serveur, `useFormState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée. [Voir d'autres exemples plus bas](#usage). @@ -117,7 +117,7 @@ function action(currentState, formData) { #### Afficher des erreurs de formulaire {/*display-form-errors*/} -Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une action serveur, enrobez l'action dans un appel à `useFormState`. +Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une Action Serveur, enrobez l'action dans un appel à `useFormState`. @@ -190,7 +190,7 @@ form button { #### Afficher des données structurées suite à l'envoi d'un formulaire {/*display-structured-information-after-submitting-a-form*/} -La valeur renvoyée par une action serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour. +La valeur renvoyée par une Action Serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour. diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 2623f9d2c..c963dfeb0 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,8 +4,7 @@ title: Référence API React -Cette section fournit une documentation de référence détaillée pour travailler avec React. -Pour une introduction à React, consultez plutôt la section [Apprendre](/learn). +Cette section fournit une documentation de référence détaillée pour travailler avec React. Pour une introduction à React, consultez plutôt la section [Apprendre](/learn). diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index 8359b3f12..d368e4aae 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -42,7 +42,7 @@ export default function RichTextEditor({ timestamp, text }) { } ``` -Lorsqu'un fichier marqué avec `'use client'` est importé par un composant côté serveur, [les *bundlers* compatibles](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) traiteront l'import comme un « point de césure » entre le code côté serveur et le code côté client. +Lorsqu'un fichier marqué avec `'use client'` est importé par un Composant Serveur, [les *bundlers* compatibles](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) traiteront l'import comme un « point de césure » entre le code côté serveur et le code côté client. En tant que dépendances de `RichTextEditor`, `formatDate` et `Button` seront également évaluées côté client, indépendamment de la présence d'une directive `'use client'` dans le module qui les déclare. Notez qu'un même module peut être évalué tant côté serveur lorsqu'il est importé par du code côté serveur, que côté client lorsqu'il est importé par du code côté client. @@ -50,16 +50,16 @@ En tant que dépendances de `RichTextEditor`, `formatDate` et `Button` seront é * `'use client'` doit être placé au tout début de la fonction ou du module concerné ; au-dessus notamment de tout code, y compris les imports (mais il peut y avoir des commentaires avant les directives). La directive doit utiliser des apostrophes (`'`) ou guillemets (`"`), mais pas des *backticks* (`). * Lorsqu'un fichier `'use client'` est importé depuis un autre fichier côté client, la directive n'a aucun effet. -* Lorsqu'un module de composant contient une directive `'use client'`, toute utilisation de ce composant produit de façon garantie un composant côté client. Ceci dit, un composant peut être évalué côté client même s'il n'utilise pas de directive `'use client'`. - * L'utilisation d'un composant constitue un composant côté client si elle a lieu dans un module doté d'une directive `'use client'` ou si elle compte dans ses dépendances (directes ou indirectes) un module doté d'une directive `'use client'`. Dans tous les autres cas, on considère que le composant est côté serveur. -* Le code marqué comme exécutable côté client ne se limite pas aux composants. Tout code figurant dans l'arbre des dépendances d'un module côté client est envoyé vers le client pour y être exécuté. -* Lorsqu'un module côté serveur importe les valeurs d'un module doté de la directive `'use client'`, les valeurs en question doivent être soit un composant React, soit une des [valeurs de prop sérialisables](#passing-props-from-server-to-client-components) prises en charge afin de pouvoir être passées au composant côté client par du code côté serveur. Tout autre cas de figure lève une exception. +* Lorsqu'un module de composant contient une directive `'use client'`, toute utilisation de ce composant produit de façon garantie un Composant Client. Ceci dit, un composant peut être évalué côté client même s'il n'utilise pas de directive `'use client'`. + * L'utilisation d'un composant constitue un Composant Client si elle a lieu dans un module doté d'une directive `'use client'` ou si elle compte dans ses dépendances (directes ou indirectes) un module doté d'une directive `'use client'`. Dans tous les autres cas, on considère que le composant est côté serveur. +* Le code marqué comme exécutable côté client ne se limite pas aux composants. Tout code figurant dans l'arbre des dépendances d'un Module Client est envoyé vers le client pour y être exécuté. +* Lorsqu'un Module Serveur importe les valeurs d'un module doté de la directive `'use client'`, les valeurs en question doivent être soit un composant React, soit une des [valeurs de prop sérialisables](#passing-props-from-server-to-client-components) prises en charge afin de pouvoir être passées au Composant Client par du code côté serveur. Tout autre cas de figure lève une exception. ### Comment `'use client'` marque du code comme étant côté client {/*how-use-client-marks-client-code*/} Dans une appli React, les composants sont souvent répartis en plusieurs fichiers ou [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component). -Pour les applis ayant recours aux React Server Components, l'appli fait par défaut son rendu coté serveur. `'use client'` crée un « point de césure » entre les codes côté client et côté serveur au sein de [l'arbre de dépendances de modules](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), produisant de fait une sous-arborescence de modules côté client. +Pour les applis ayant recours aux React Server Components, l'appli fait par défaut son rendu coté serveur. `'use client'` crée un « point de césure » entre les codes côté client et côté serveur au sein de [l'arbre de dépendances de modules](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), produisant de fait une sous-arborescence de Modules Client. Afin de mieux illustrer cet aspect, considérons l'appli suivante basée sur les React Server Components. @@ -146,7 +146,7 @@ export default [ -Dans l'arbre de dépendances de modules pour cette appli d'exemple, la directive `'use client'` dans `InspirationGenerator.js` marque ce module et toutes ses dépendances transitives comme des modules côté client. La partie de l'arborescence qui démarre avec `InspirationGenerator.js` est désormais marquée comme des modules côté client. +Dans l'arbre de dépendances de modules pour cette appli d'exemple, la directive `'use client'` dans `InspirationGenerator.js` marque ce module et toutes ses dépendances transitives comme des Modules Client. La partie de l'arborescence qui démarre avec `InspirationGenerator.js` est désormais marquée comme des Modules Client. @@ -160,22 +160,22 @@ La partie rendue côté serveur de l'arbre de rendu est alors envoyée côté cl -L'arbre de rendu de l'appli utilisant les React Server Components. `InspirationGenerator` et son composant enfant `FancyText` sont des composants exportés par du code marqué comme côté client, et sont donc considérés comme des composants côté client. +L'arbre de rendu de l'appli utilisant les React Server Components. `InspirationGenerator` et son composant enfant `FancyText` sont des composants exportés par du code marqué comme côté client, et sont donc considérés comme des Composants Client. On introduit ici les définitions suivantes : -* Les **composants côté client** *(Client Components, NdT)* sont les composants dans l'arbre de rendu dont le rendu est fait côté client. -* Les **composants côté serveur** *(Server Components, NdT)* sont les composants dans l'arbre de rendu dont le rendu est fait côté serveur. +* Les **Composants Client** sont les composants dans l'arbre de rendu dont le rendu est fait côté client. +* Les **Composants Serveur** sont les composants dans l'arbre de rendu dont le rendu est fait côté serveur. -En parcourant l'appli d'exemple, `App`, `FancyText` et `Copyright` sont tous rendus côté serveur et donc considérés comme des composants côté serveur. Mais puisque `InspirationGenerator.js` et ses dépendances transitives sont marquées comme du code côté client, le composant `InspirationGenerator` et son composant enfant `FancyText` sont des composants côté client. +En parcourant l'appli d'exemple, `App`, `FancyText` et `Copyright` sont tous rendus côté serveur et donc considérés comme des Composants Serveur. Mais puisque `InspirationGenerator.js` et ses dépendances transitives sont marquées comme du code côté client, le composant `InspirationGenerator` et son composant enfant `FancyText` sont des Composants Client. -#### Pourqoi `FancyText` est-il à la fois un composant serveur et un composant client ? {/*how-is-fancytext-both-a-server-and-a-client-component*/} +#### Pourqoi `FancyText` est-il à la fois un Composant Serveur et un Composant Client ? {/*how-is-fancytext-both-a-server-and-a-client-component*/} -À en croire les définitions ci-dessus, le composant `FancyText` est à la fois un composant côté serveur et côté client, comment est-ce possible ? +À en croire les définitions ci-dessus, le composant `FancyText` est à la fois un Composant Serveur et côté client, comment est-ce possible ? Commençons par clarifier le terme « composant », qui n'est pas très précis. Voici deux façons de comprendre « composant » : @@ -200,10 +200,10 @@ function App() { Cette distinction est généralement superflue lorsqu'on explique des concepts, mais revêt ici une importance particulière. -Lorsque nous parlons de composants côté serveur ou côté client, nous faisons spécifiquement référence à l'utilisation des composants. +Lorsque nous parlons de Composants Serveur ou côté client, nous faisons spécifiquement référence à l'utilisation des composants. -* Si le composant est défini dans un module porteur de la directive `'use client'`, ou s'il est importé et appelé dans un composant côté client, alors l'utilisation de ce composant constitue un composant côté client. -* Dans les autres cas, l'utilisation de ce composant constitue un composant côté serveur. +* Si le composant est défini dans un module porteur de la directive `'use client'`, ou s'il est importé et appelé dans un Composant Client, alors l'utilisation de ce composant constitue un Composant Client. +* Dans les autres cas, l'utilisation de ce composant constitue un Composant Serveur. @@ -213,17 +213,17 @@ Un arbre de rendu illustre les utilisations des composants. Pour en revenir à la question de `FancyText`, nous pouvons voir que la définition du composant *ne comporte pas* de directive `'use client'` et qu'elle est utilisée deux fois. -L'utilisation de `FancyText` comme enfant de `App` marque cette utilisation comme un composant côté serveur. En revanche, l'import et l'appel de `FancyText` au sein de `InspirationGenerator` marque cette utilisation comme un composant côté client puisque `InspirationGenerator` est assujetti à une directive `'use client'`. +L'utilisation de `FancyText` comme enfant de `App` marque cette utilisation comme un Composant Serveur. En revanche, l'import et l'appel de `FancyText` au sein de `InspirationGenerator` marque cette utilisation comme un Composant Client puisque `InspirationGenerator` est assujetti à une directive `'use client'`. -Ça signifie que la définition du composant `FancyText` sera évaluée côté serveur mais aussi envoyée vers le client pour faire le rendu de son utilisation en tant que composant côté client. +Ça signifie que la définition du composant `FancyText` sera évaluée côté serveur mais aussi envoyée vers le client pour faire le rendu de son utilisation en tant que Composant Client. -#### Pourquoi `Copyright` est-il un composant côté serveur ? {/*why-is-copyright-a-server-component*/} +#### Pourquoi `Copyright` est-il un Composant Serveur ? {/*why-is-copyright-a-server-component*/} -Dans la mesure où `Copyright` figure comme composant enfant dans le rendu du composant côté client `InspirationGenerator`, vous êtes peut-être surpris·e qu'il soit considéré comme un composant côté serveur. +Dans la mesure où `Copyright` figure comme composant enfant dans le rendu du Composant Client `InspirationGenerator`, vous êtes peut-être surpris·e qu'il soit considéré comme un Composant Serveur. Gardez à l'esprit que `'use client'` définit un « point de césure » entre les codes côté serveur et côté client dans *l'arbre de dépendances de modules*, pas dans l'arbre de rendu. @@ -235,7 +235,7 @@ Gardez à l'esprit que `'use client'` définit un « point de césure » entre Dans l'arbre de dépendances de modules, nous voyons que `App.js` importe et appelle `Copyright` depuis le module `Copyright.js`. Puisque `Copyright.js` ne comporte pas de directive `'use client'`, cette utilisation du composant est rendue côté serveur. `App` est lui aussi rendu côté serveur puisqu'il s'agit du composant racine. -Les composants côté client peuvent faire le rendu de composants côté serveur parce que vous pouvez passer du JSX comme props. Dans notre cas, `InspirationGenerator` reçoit `Copyright` comme [enfant](/learn/passing-props-to-a-component#passing-jsx-as-children). Cependant, le module `InspirationGenerator.js` n'importe jamais directement le module `Copyright.js`, c'est le module `App.js` qui s'en occupe. En fait, le composant `Copyright` est entièrement exécuté avant même qu'`InspirationGenerator` ne commence son rendu. +Les Composants Client peuvent faire le rendu de Composants Serveur parce que vous pouvez passer du JSX comme props. Dans notre cas, `InspirationGenerator` reçoit `Copyright` comme [enfant](/learn/passing-props-to-a-component#passing-jsx-as-children). Cependant, le module `InspirationGenerator.js` n'importe jamais directement le module `Copyright.js`, c'est le module `App.js` qui s'en occupe. En fait, le composant `Copyright` est entièrement exécuté avant même qu'`InspirationGenerator` ne commence son rendu. Le point important à retenir, c'est que la relation de rendu parent-enfant ne garantit pas un environnement de rendu unique. @@ -243,27 +243,27 @@ Le point important à retenir, c'est que la relation de rendu parent-enfant ne g ### Quand utiliser `'use client'` {/*when-to-use-use-client*/} -Avec `'use client'`, vous pouvez déterminer quand les composants sont des composants côté client. Dans la mesure où les composants sont côté serveur par défaut, voici un survol rapide des avantages et limitations des composants côté serveur, pour vous aider à déterminer si vous avez besoin de marquer du code comme étant côté client. +Avec `'use client'`, vous pouvez déterminer quand les composants sont des Composants Client. Dans la mesure où les composants sont côté serveur par défaut, voici un survol rapide des avantages et limitations des Composants Serveur, pour vous aider à déterminer si vous avez besoin de marquer du code comme étant côté client. -Par souci de simplicité, nous parlons ici des composants côté serveur, mais les mêmes principes s'appliquent à tout code de votre appli qui serait exécuté côté serveur. +Par souci de simplicité, nous parlons ici des Composants Serveur, mais les mêmes principes s'appliquent à tout code de votre appli qui serait exécuté côté serveur. -#### Avantages des composants côté serveur {/*advantages*/} +#### Avantages des Composants Serveur {/*advantages*/} -* Les composants côté serveur aident à réduire la quantité de code envoyée et exécutée côté client. Seuls les modules client sont intégrés aux *bundles* et évalués côté client. -* Les composants côté serveur tirent parti de leur exécution côté serveur : ils peuvent accéder à son système de fichiers local et bénéficient par ailleurs d'une faible latence pour leurs chargements de données et autres requêtes réseau. +* Les Composants Serveur aident à réduire la quantité de code envoyée et exécutée côté client. Seuls les Modules Client sont intégrés aux *bundles* et évalués côté client. +* Les Composants Serveur tirent parti de leur exécution côté serveur : ils peuvent accéder à son système de fichiers local et bénéficient par ailleurs d'une faible latence pour leurs chargements de données et autres requêtes réseau. -#### Limitations des composants côté serveurs {/*limitations*/} +#### Limitations des Composants Serveurs {/*limitations*/} -* Les composants côté serveur ne peuvent pas gérer d'interactions, puisque les gestionnaires d'événements ne peuvent être inscrits et déclenchés que par le client. - * Des gestionnaires d'événements tels que `onClick` ne peuvent par exemple être définis que dans des composants côté client. -* Les composants côté serveur ne peuvent pas utiliser la plupart des Hooks. - * Lorsque les composants côté serveur font leur rendu, le résultat se résume pour l'essentiel à une liste de composants dont le rendu doit être fait côté client. Les composants côté serveur ne persistent pas en mémoire une fois le rendu effectué, et ne peuvent donc pas avoir leur propre état. +* Les Composants Serveur ne peuvent pas gérer d'interactions, puisque les gestionnaires d'événements ne peuvent être inscrits et déclenchés que par le client. + * Des gestionnaires d'événements tels que `onClick` ne peuvent par exemple être définis que dans des Composants Client. +* Les Composants Serveur ne peuvent pas utiliser la plupart des Hooks. + * Lorsque les Composants Serveur font leur rendu, le résultat se résume pour l'essentiel à une liste de composants dont le rendu doit être fait côté client. Les Composants Serveur ne persistent pas en mémoire une fois le rendu effectué, et ne peuvent donc pas avoir leur propre état. -### Types sérialisables renvoyés par les composants côté serveur {/*serializable-types*/} +### Types sérialisables renvoyés par les Composants Serveur {/*serializable-types*/} -Comme dans n'importe quelle appli React, les composants parents passent des données à leurs composants enfants. Puisqu'ils sont ici rendus dans des environnements distincts, le passage de données d'un composant côté serveur à un composant côté client nécessite une attention particulière. +Comme dans n'importe quelle appli React, les composants parents passent des données à leurs composants enfants. Puisqu'ils sont ici rendus dans des environnements distincts, le passage de données d'un Composant Serveur à un Composant Client nécessite une attention particulière. -Les valeurs de props passées à un composant côté client doivent être sérialisables. +Les valeurs de props passées à un Composant Client doivent être sérialisables. Voici les types de props sérialisables : @@ -283,8 +283,8 @@ Voici les types de props sérialisables : * [TypedArray](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) et [ArrayBuffer](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) * [Date](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) * Les [objets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object) bruts : ceux créés via des [initialiseurs d'objets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer), dont les propriétés sont sérialisables -* Les fonctions qui sont des [actions serveur](/reference/react/use-server) -* Les éléments basés sur des composants côté client ou côté serveur (JSX) +* Les fonctions qui sont des [Actions Serveur](/reference/react/use-server) +* Les éléments basés sur des Composants Client ou côté serveur (JSX) * Les [promesses](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) En particulier, les types suivants ne sont **pas** pris en charge : @@ -321,9 +321,9 @@ export default function Counter({initialValue = 0}) { -Dans la mesure où `Counter` utilise aussi bien le Hook `useState` que des gestionnaires d'événements pour incrémenter et décrémenter la valeur, ce composant doit être un composant côté client et nécessitera donc une directive `'use client'` tout en haut de son fichier. +Dans la mesure où `Counter` utilise aussi bien le Hook `useState` que des gestionnaires d'événements pour incrémenter et décrémenter la valeur, ce composant doit être un Composant Client et nécessitera donc une directive `'use client'` tout en haut de son fichier. -Par opposition, un composant qui fait le rendu d'une UI non interactive n'aura pas besoin d'être un composant côté client. +Par opposition, un composant qui fait le rendu d'une UI non interactive n'aura pas besoin d'être un Composant Client. ```js import { readFile } from 'node:fs/promises'; @@ -335,7 +335,7 @@ export default async function CounterContainer() { } ``` -Ici le composant parent de `Counter`, à savoir `CounterContainer`, ne requiert par exemple pas de directive `'use client'` puisqu'il n'est pas interactif et n'utilise aucun état. Qui plus est, `CounterContainer` doit être un composant côté serveur puisqu'il lit le système de fichiers local du serveur, ce qui n'est possible que dans un composant côté serveur. +Ici le composant parent de `Counter`, à savoir `CounterContainer`, ne requiert par exemple pas de directive `'use client'` puisqu'il n'est pas interactif et n'utilise aucun état. Qui plus est, `CounterContainer` doit être un Composant Serveur puisqu'il lit le système de fichiers local du serveur, ce qui n'est possible que dans un Composant Serveur. On trouve aussi des composants qui n'utilisent aucun aspect exclusif aux côtés serveur ou client, et sont donc agnostiques quant à leur environnement de rendu. Dans notre exemple précédent, c'est notamment le cas du composant `FancyText`. @@ -347,9 +347,9 @@ export default function FancyText({title, text}) { } ``` -On n'a ici pas besoin d'ajouter la directive `'use client'`, de sorte que c'est le *résultat* (et non le code source) de `FancyText` qui sera envoyé au navigateur lorsqu'il est utilisé comme composant côté serveur. Comme l'appli d'exemple sur les citations inspirantes l'a montré, `FancyText` y est utilisé tant comme composant côté serveur que comme composant côté client, suivant les endroits qui l'importent et l'utilisent. +On n'a ici pas besoin d'ajouter la directive `'use client'`, de sorte que c'est le *résultat* (et non le code source) de `FancyText` qui sera envoyé au navigateur lorsqu'il est utilisé comme Composant Serveur. Comme l'appli d'exemple sur les citations inspirantes l'a montré, `FancyText` y est utilisé tant comme Composant Serveur que comme Composant Client, suivant les endroits qui l'importent et l'utilisent. -Mais si le HTML produit par `FancyText` s'avérait nettement plus lourd que son code source (dépendances comprises), il pourrait être utile, du point de vue des performances, de le forcer à toujours être un composant côté client. Les composants qui renvoient un énorme descriptif de chemin SVG sont un cas classique où le forçage d'un composant comme étant côté client peut s'avérer bénéfique. +Mais si le HTML produit par `FancyText` s'avérait nettement plus lourd que son code source (dépendances comprises), il pourrait être utile, du point de vue des performances, de le forcer à toujours être un Composant Client. Les composants qui renvoient un énorme descriptif de chemin SVG sont un cas classique où le forçage d'un composant comme étant côté client peut s'avérer bénéfique. ### Utiliser des API réservées au côté client {/*using-client-apis*/} @@ -389,6 +389,6 @@ Ces bibliothèques sont susceptibles de recourir aux Hooks ou à des API réserv * [startTransition](/reference/react/startTransition) * Toute API réservée au côté client, telle que l'insertion DOM ou les vues natives de la plateforme -Si ces bibliothèques ont été mises à jour pour être compatibles avec les React Server Components, elles inclueront alors d'emblée des marqueurs `'use client'` aux endroits pertinents, ce qui vous permettra de les utiliser directement depuis vos composants côté serveur. Mais si une bibliothèque n'a pas été mise à jour, ou si un composant a besoin de props telles qu'un gestionnaire d'événement (qui ne peut être fourni que côté client), vous aurez peut-être besoin de créer votre propre fichier de composant côté client pour faire le lien entre les composants côté client tiers et les composants côté serveur au sein desquels vous aimeriez les utiliser. +Si ces bibliothèques ont été mises à jour pour être compatibles avec les React Server Components, elles inclueront alors d'emblée des marqueurs `'use client'` aux endroits pertinents, ce qui vous permettra de les utiliser directement depuis vos Composants Serveur. Mais si une bibliothèque n'a pas été mise à jour, ou si un composant a besoin de props telles qu'un gestionnaire d'événement (qui ne peut être fourni que côté client), vous aurez peut-être besoin de créer votre propre fichier de Composant Client pour faire le lien entre les Composants Client tiers et les Composants Serveur au sein desquels vous aimeriez les utiliser. [TODO]: <> (Troubleshooting - need use-cases) diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index d55e5fcb8..1192a3807 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -25,7 +25,7 @@ canary: true ### `'use server'` {/*use-server*/} -Ajoutez `'use server';` tout en haut d'une fonction asynchrone pour indiquer que cette fonction peut être appelée par du code côté client. Nous appelons ces fonctions des _actions serveur_. +Ajoutez `'use server';` tout en haut d'une fonction asynchrone pour indiquer que cette fonction peut être appelée par du code côté client. Nous appelons ces fonctions des _Actions Serveur_. ```js {2} async function addToCart(data) { @@ -34,29 +34,29 @@ async function addToCart(data) { } ``` -Lorsque vous appelez une action serveur côté client, elle fait une requête réseau auprès du serveur en incluant une copie sérialisée des arguments que vous avez passés. Si l'action serveur renvoie une valeur, cette valeur sera sérialisée puis renvoyée au client. +Lorsque vous appelez une Action Serveur côté client, elle fait une requête réseau auprès du serveur en incluant une copie sérialisée des arguments que vous avez passés. Si l'Action Serveur renvoie une valeur, cette valeur sera sérialisée puis renvoyée au client. -Plutôt que de marquer chaque fonction concernée avec `'use server'`, vous pouvez ajouter cette directive tout en haut d'un fichier afin d'en marquer tous les exports comme des actions serveur utilisables n'importe où, y compris au travers d'imports par du code client. +Plutôt que de marquer chaque fonction concernée avec `'use server'`, vous pouvez ajouter cette directive tout en haut d'un fichier afin d'en marquer tous les exports comme des Actions Serveur utilisables n'importe où, y compris au travers d'imports par du code client. #### Limitations {/*caveats*/} * `'use server'` doit être placé au tout début de la fonction ou du module concerné ; au-dessus notamment de tout code, y compris les imports (mais il peut y avoir des commentaires avant les directives). La directive doit utiliser des apostrophes (`'`) ou guillemets (`"`), mais pas des *backticks* (`). -* `'use server'` ne peut être utilisé qu'au sein de fichiers côté serveur. Les actions serveur résultantes peuvent être passées à des composants côté client au moyen des props. Consultez la liste des [types sérialisables](#serializable-parameters-and-return-values). -* Pour importer une action serveur depuis du [code côté client](/reference/react/use-client), la directive doit obligatoirement être utilisée au niveau du module. +* `'use server'` ne peut être utilisé qu'au sein de fichiers côté serveur. Les Actions Serveur résultantes peuvent être passées à des Composants Client au moyen des props. Consultez la liste des [types sérialisables](#serializable-parameters-and-return-values). +* Pour importer une Action Serveur depuis du [code côté client](/reference/react/use-client), la directive doit obligatoirement être utilisée au niveau du module. * Dans la mesure où les appels réseau sous-jacents sont forcément asynchrones, `'use server'` n'est utilisable qu'au sein de fonctions asynchrones. -* Considérez toujours les arguments de vos actions serveur comme des données non validées, et soumettez toute mutation à un processus d'autorisation. Allez voir les [considérations sécuritaires](#security). -* Les actions serveur devraient toujours être appelées au sein d'une [transition](/reference/react/useTransition). Les actions serveur passées à [``](/reference/react-dom/components/form#props) ou [`formAction`](/reference/react-dom/components/input#props) seront automatiquement enrobées par une transition. -* Les actions serveur sont conçues pour des mutations qui mettent à jour l'état côté serveur ; il est déconseillé de s'en servir pour du simple chargement de données. Dans cet esprit, les frameworks qui implémentent les actions serveur traitent généralement une action à la fois et ne permettent pas la mise en cache de leur valeur renvoyée. +* Considérez toujours les arguments de vos Actions Serveur comme des données non validées, et soumettez toute mutation à un processus d'autorisation. Allez voir les [considérations sécuritaires](#security). +* Les Actions Serveur devraient toujours être appelées au sein d'une [transition](/reference/react/useTransition). Les Actions Serveur passées à [``](/reference/react-dom/components/form#props) ou [`formAction`](/reference/react-dom/components/input#props) seront automatiquement enrobées par une transition. +* Les Actions Serveur sont conçues pour des mutations qui mettent à jour l'état côté serveur ; il est déconseillé de s'en servir pour du simple chargement de données. Dans cet esprit, les frameworks qui implémentent les Actions Serveur traitent généralement une action à la fois et ne permettent pas la mise en cache de leur valeur renvoyée. ### Considérations sécuritaires {/*security*/} -Les arguments passés aux actions serveur sont entièrement contrôlés par le côté client. Pour des raisons de sécurité, traitez-les toujours comme des données non validées, et assurez-vous d'en vérifier la structure et le contenu, et de procéder à leur échappement lorsque c'est nécessaire. +Les arguments passés aux Actions Serveur sont entièrement contrôlés par le côté client. Pour des raisons de sécurité, traitez-les toujours comme des données non validées, et assurez-vous d'en vérifier la structure et le contenu, et de procéder à leur échappement lorsque c'est nécessaire. -Par ailleurs, et quelle que soit l'action serveur, assurez-vous toujours que l'utilisateur authentifié a le droit d'effectuer cette action. +Par ailleurs, et quelle que soit l'Action Serveur, assurez-vous toujours que l'utilisateur authentifié a le droit d'effectuer cette action. -Pour éviter le renvoi de données sensibles par une action serveur, nous proposons des API expérimentales empêchant l'envoi vers du code côté client de valeurs et objets uniques « ternis ». +Pour éviter le renvoi de données sensibles par une Action Serveur, nous proposons des API expérimentales empêchant l'envoi vers du code côté client de valeurs et objets uniques « ternis ». Allez jeter un coup d'œil à [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) et [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference). @@ -64,9 +64,9 @@ Allez jeter un coup d'œil à [experimental_taintUniqueValue](/reference/react/e ### Arguments et valeurs renvoyées sérialisables {/*serializable-parameters-and-return-values*/} -Lorsque du code côté client appelle l'action serveur au travers du réseau, tout argument passé aura besoin d'être sérialisé. +Lorsque du code côté client appelle l'Action Serveur au travers du réseau, tout argument passé aura besoin d'être sérialisé. -Voici les types pris en charge pour les arguments d'une action serveur : +Voici les types pris en charge pour les arguments d'une Action Serveur : * Types primitifs * [string](https://developer.mozilla.org/fr/docs/Glossary/String) @@ -85,24 +85,24 @@ Voici les types pris en charge pour les arguments d'une action serveur : * [Date](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) * Les instances de [FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData) * Les [objets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object) bruts : ceux créés via des [initialiseurs d'objets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer), dont les propriétés sont sérialisables -* Les fonctions qui sont des actions serveur +* Les fonctions qui sont des Actions Serveur * Les [promesses](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) En particulier, les types suivants ne sont **pas** pris en charge : * Les éléments React, ainsi que [JSX](/learn/writing-markup-with-jsx) -* Les fonctions, y compris les fonctions composants, et de façon plus générale toute fonction qui ne serait pas une action serveur +* Les fonctions, y compris les fonctions composants, et de façon plus générale toute fonction qui ne serait pas une Action Serveur * Les [classes](https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) * Les objets de quelque classe que ce soit (hormis les classes natives explicitement listées plus haut) ainsi que les objets ayant [un prototype nul](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) * Les symboles non inscrits au global, ex. `Symbol('my new symbol')` -Les valeurs renvoyées sérialisables sont les mêmes que pour les [props sérialisables](/reference/react/use-client#passing-props-from-server-to-client-components) d'un composant client agissant comme « point de césure » entre le code côté client et le code côté serveur. +Les valeurs renvoyées sérialisables sont les mêmes que pour les [props sérialisables](/reference/react/use-client#passing-props-from-server-to-client-components) d'un Composant Client agissant comme « point de césure » entre le code côté client et le code côté serveur. ## Utilisation {/*usage*/} -### Les actions serveur dans les formulaires {/*server-actions-in-forms*/} +### Les Actions Serveur dans les formulaires {/*server-actions-in-forms*/} -Le cas le plus courant d'actions serveur consiste à appeler des fonctions côté serveur pour modifier des données. Dans le navigateur, on utilise traditionnellement [l'élément HTML `form`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form) pour permettre à l'utilisateur de demander une mutation de données. Avec les React Server Components, React prend désormais pleinement en charge les actions serveur dans les [formulaires](/reference/react-dom/components/form). +Le cas le plus courant d'Actions Serveur consiste à appeler des fonctions côté serveur pour modifier des données. Dans le navigateur, on utilise traditionnellement [l'élément HTML `form`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form) pour permettre à l'utilisateur de demander une mutation de données. Avec les React Server Components, React prend désormais pleinement en charge les Actions Serveur dans les [formulaires](/reference/react-dom/components/form). Voici un formulaire qui permet à l'utilisateur de réserver un identifiant. @@ -123,15 +123,15 @@ export default App() { } ``` -Dans cet exemple, `requestUsername` est une action serveur passée à un ``. Lorsque l'utilisateur envoie le formulaire, une requête réseau est faite à l'action serveur `requestUsername`. Puisque celle-ci est appelée au travers d'un formulaire, React fournit les [FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData) du formulaire comme premier argument à l'action serveur. +Dans cet exemple, `requestUsername` est une Action Serveur passée à un ``. Lorsque l'utilisateur envoie le formulaire, une requête réseau est faite à l'Action Serveur `requestUsername`. Puisque celle-ci est appelée au travers d'un formulaire, React fournit les [FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData) du formulaire comme premier argument à l'Action Serveur. -Grâce au passage d'une action serveur comme `action` du formulaire, React peut faire [l'amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement) du formulaire. Ça signifie que les formulaires peuvent être envoyés avant même que le *bundle* JavaScript ne soit chargé et exécuté. +Grâce au passage d'une Action Serveur comme `action` du formulaire, React peut faire [l'amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement) du formulaire. Ça signifie que les formulaires peuvent être envoyés avant même que le *bundle* JavaScript ne soit chargé et exécuté. #### Gérer les valeurs renvoyées dans les formulaires {/*handling-return-values*/} Pour revenir à notre formulaire de réservation d'identifiant, il peut arriver que l'identifiant ne soit plus disponible. `requestUsername` devrait nous indiquer si elle a réussi ou non sa réservation. -Pour mettre à jour l'UI sur base du résultat d'une action serveur, tout en proposant une amélioration progressive, utilisez [`useFormState`](/reference/react-dom/hooks/useFormState). +Pour mettre à jour l'UI sur base du résultat d'une Action Serveur, tout en proposant une amélioration progressive, utilisez [`useFormState`](/reference/react-dom/hooks/useFormState). ```js // requestUsername.js @@ -171,11 +171,11 @@ function UsernameForm() { Remarquez que `useFormState`, au même titre que la plupart des Hooks, ne peut être appelé que depuis du [code côté client](/reference/react/use-client). -### Appeler une action serveur hors d'un `` {/*calling-a-server-action-outside-of-form*/} +### Appeler une Action Serveur hors d'un `` {/*calling-a-server-action-outside-of-form*/} -Les actions serveur exposent en pratique des points d'entrée côté serveur, et peuvent être appelées n'importe où dans du code client. +Les Actions Serveur exposent en pratique des points d'entrée côté serveur, et peuvent être appelées n'importe où dans du code client. -Pour utiliser une action serveur hors d'un [formulaire](/reference/react-dom/components/form), appelez l'action serveur au sein d'une [transition](/reference/react/useTransition), ce qui vous permettra non seulement d'afficher un indicateur de chargement, mais aussi de réaliser des [mises à jour optimistes d'état](/reference/react/useOptimistic) et de gérer les éventuelles erreurs. Les formulaires enrobent automatiquement vos actions serveur dans une transition. +Pour utiliser une Action Serveur hors d'un [formulaire](/reference/react-dom/components/form), appelez l'Action Serveur au sein d'une [transition](/reference/react/useTransition), ce qui vous permettra non seulement d'afficher un indicateur de chargement, mais aussi de réaliser des [mises à jour optimistes d'état](/reference/react/useOptimistic) et de gérer les éventuelles erreurs. Les formulaires enrobent automatiquement vos Actions Serveur dans une transition. ```js {9-12} import incrementLike from './actions'; @@ -213,4 +213,4 @@ export default async incrementLike() { } ``` -Pour obtenir la valeur renvoyée par une action serveur, vous aurez besoin d'un `await` sur la promesse renvoyée. +Pour obtenir la valeur renvoyée par une Action Serveur, vous aurez besoin d'un `await` sur la promesse renvoyée. diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index b27db0a29..0d91d59e3 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -179,7 +179,7 @@ Vous vous demandez peut-être pourquoi il est préférable d’utiliser `useId` Le principal avantage de `useId` tient à ce que React garantit son bon fonctionnement dans [le rendu serveur](/reference/react-dom/server). Lors du rendu serveur, vos composants produisent du HTML. Plus tard, sur le client, le processus d'[hydratation](/reference/react-dom/client/hydrateRoot) attache vos gestionnaires d'événements au HTML généré. Pour que l’hydratation fonctionne, le résultat du code client doit correspondre au HTML du serveur. -Il est très difficile de garantir ça avec un compteur incrémental, car l’ordre dans lequel les composants côté client sont hydratés peut ne pas correspondre à l’ordre dans lequel le code HTML du serveur est émis. En appelant `useId`, vous vous assurez que l'hydratation fonctionnera et que la sortie correspondra entre le serveur et le client. +Il est très difficile de garantir ça avec un compteur incrémental, car l’ordre dans lequel les Composants Client sont hydratés peut ne pas correspondre à l’ordre dans lequel le code HTML du serveur est émis. En appelant `useId`, vous vous assurez que l'hydratation fonctionnera et que la sortie correspondra entre le serveur et le client. Dans React, `useId` est généré à partir du « chemin de parents » du composant appelant. C’est pourquoi, si l’arbre du client et celui du serveur sont identiques, ce « chemin » correspondra quel que soit l’ordre de rendu. diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index 455a3d194..e3859db5e 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -115,7 +115,7 @@ export default function App() { ]); async function sendMessage(formData) { const sentMessage = await deliverMessage(formData.get("message")); - setMessages([...messages, { text: sentMessage }]); + setMessages((messages) => [...messages, { text: sentMessage }]); } return ; } diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 8625ca4e8..890e7990b 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -82,8 +82,7 @@ }, { "title": "useTransition", - "path": "/reference/react/useTransition", - "canary": true + "path": "/reference/react/useTransition" } ] },