diff --git a/TRANSLATORS.md b/TRANSLATORS.md index 1abaef7cc..d184f710d 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -92,6 +92,9 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
  • <Suspense>
  • forwardRef
  • startTransition
    • +
  • Directives (accueil chapitre)
    • +
  • 'use client'
    • +
  • 'use server'
  • react-dom : Composants (accueil chapitre)
  • API React DOM intégrées
  • flushSync
    • diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 806771e40..258fe8d05 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -36,7 +36,7 @@ const variantMap = { 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, canary: { - title: 'Canary', + title: 'Canari (fonctionnalité expérimentale)', Icon: IconCanary, containerClasses: 'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md index b323dab1d..4ab526a1e 100644 --- a/src/content/reference/react/directives.md +++ b/src/content/reference/react/directives.md @@ -5,19 +5,19 @@ canary: true -These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them. +Ces directives ne sont utiles que si vous [utilisez React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux. -Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks). +Les directives fournissent des instructions à destination des [*bundlers* compatibles avec React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks). --- -## Source code directives {/*source-code-directives*/} +## Directives dans le code source {/*source-code-directives*/} -* [`'use client'`](/reference/react/use-client) marks source files whose components execute on the client. -* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code. \ No newline at end of file +* [`'use client'`](/reference/react/use-client) marque les fichiers sources dont les composants s'exécutent côté client. +* [`'use server'`](/reference/react/use-server) marque les fonctions côté serveur qui peuvent être appelées par du code côté client. diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index fc6173acb..8636e4775 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -5,13 +5,14 @@ canary: true -`'use client'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them. +`'use client'` n'est utile que si vous [utilisez React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux. + -`'use client'` marks source files whose components execute on the client. +`'use client'` marque les fichiers sources dont les composants s'exécutent côté client. @@ -19,11 +20,11 @@ canary: true --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `'use client'` {/*use-client*/} -Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported. +Ajoutez `'use client';` tout en haut d'un fichier pour indiquer que ce fichier (ainsi que tout composant enfant qu'il utilise) s'exécute coté client, indépendamment des endroits qui l'importent. ```js 'use client'; @@ -34,24 +35,24 @@ export default function RichTextEditor(props) { // ... ``` -When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState). +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 exclusivement côté serveur et le code côté client. Les composants qui figurent dans ce module ou dans ses dépendances peuvent utiliser des fonctionnalités React réservées au côté client, telles que [`useState`](/reference/react/useState). -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props. -* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception. -* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components. -* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components. -* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary. -* Components like a `` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component. -* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server. -* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database. -* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.) +* Vous n'avez pas besoin d'ajouter `'use client'` à chaque fichier pour utiliser des fonctionnalités React réservées au côté client, il suffit de le faire pour les fichiers importés par des fichiers de composants côté serveur. `'use client'` dénote une *frontière* entre le code exclusivement côté serveur et le code client ; tout composant plus bas dans l'arbre sera automatiquement exécuté côté client. Pour qu'ils puissent être exploités par des composants côté serveur, les composants exportés depuis des fichiers `'use client'` doivent avoir des props sérialisables. +* Lorsqu'un fichier `'use client'` est importé depuis un fichier côté serveur, les valeurs importées peuvent être traitées comme un composant React ou passées comme props à un composant côté client. Toute autre utilisation lèvera une exception. +* Lorsqu'un fichier `'use client'` est importé depuis un autre fichier côté client, la directive n'a aucun effet. Ça permet d'écrire des composants côté client qui sont utilisables à la fois par des composants côté serveur et d'autres côté client. +* Tout le code d'un fichier `'use client'`, ainsi que tous les modules qu'il importe (directement ou indirectement), feront partie du graphe de modules côté client et devront être envoyés pour exécution côté client afin d'être affichés par le navigateur. Pour réduire la taille du *bundle* et tirer le meilleur parti du serveur, déplacez l'état (et les directives `'use client'`) plus bas dans l'arbre lorsque c'est possible, et passez les composants côté serveur [comme enfants](/learn/passing-props-to-a-component#passing-jsx-as-children) aux composants côté client. +* Dans la mesure où les props sont sérialisées pour franchir la frontière serveur–client, vous comprendrez que l'emplacement de ces directives peut affecter la quantité de données envoyée au client. Évitez les structures de données inutilement lourdes. +* Les composants tels que ``, qui ne recourent à aucune fonctionnalité strictement côté serveur ou côté client, ne devraient généralement pas être marqués avec `'use client'`. Ainsi, ils peuvent faire leur rendu entièrement côté serveur lorsqu'ils sont utilisés par un composant côté serveur, mais aussi être ajoutés au *bundle* client lorsqu'ils sont utilisés par un composant côté client. +* Les bibliothèques publiées sur npm devraient inclure `'use client'` dans les composants React qu'elles exportent dont les props sont sérialisables et qui utilisent des fonctionnalités React réservées au côté client, afin que ces composants puissent être importés et exploités par les composants côté serveur. Dans le cas contraire, leurs utilisateurs auraient besoin d'enrober les composants de la bibliothèque dans leurs propres fichiers `'use client'`, ce qui est fastidieux et empêche la bibliothèque de déplacer plus tard une partie de sa logique vers le côté serveur. Pour la publication de fichier pré-*bundlés* sur npm, assurez-vous que les fichiers sources `'use client'` atterrissent dans un *bundle* marqué avec `'use client'`, distinct de tout *bundle* contenant des exports susceptibles d'être utilisés directement par le serveur. +* Les composants côté client continueront à être exécutés dans le cadre du rendu côté serveur (SSR, *Server-Side Rendering, NdT*) ou de la génération de sites statiques lors du *build* (SSG, *Static Site Generation, NdT*), qui se comportent comme des clients pour transformer le rendu initial de composants React en HTML apte à être affiché avant que les *bundles* JavaScript ne soient téléchargés. Ils ne peuvent toutefois pas utiliser de fonctionnalités réservées au côté serveur, telles que la lecture en direct d'une base de données. +* Les directives telles que `'use client'` doivent être placées au tout début du fichier, au-dessus de tout import et de quelque autre code que ce soit (à l'exception des commentaires, qui peuvent apparaître avant). Elles doivent utiliser des apostrophes (`'`) ou guillemets (`"`), pas des apostrophes inverses (\`). (Le format de directive `'use xyz'` n'est pas sans rappeler la convention de nommage `useXyz()` des Hooks, mais c'est là une simple coïncidence.) -## Usage {/*usage*/} +## Utilisation {/*usage*/} -This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components). +Cette section est incomplète. Consultez la [documentation Next.js des Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components). diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 6b9e7df00..1c0005334 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -5,14 +5,14 @@ canary: true -`'use server'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them. +`'use server'` n'est utile que si vous [utilisez React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux. -`'use server'` marks server-side functions that can be called from client-side code. +`'use server'` marque les fonctions côté serveur qui peuvent être appelées par du code React côté client. @@ -20,11 +20,11 @@ canary: true --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `'use server'` {/*use-server*/} -Add `'use server';` at the very top of an async function to mark that the function can be executed by the client. +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. ```js async function addToCart(data) { @@ -35,21 +35,21 @@ async function addToCart(data) { // ``` -This function can be passed to the client. When called on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server function returns a value, that value will be serialized and returned to the client. +Cette fonction peut être passée au client. Lorsqu'elle est appelée par le client, elle fera un appel réseau au serveur en lui passant une copie sérialisée des arguments qu'elle a reçus. Si la fonction serveur renvoie une valeur, celle-ci sera sérialisée et renvoyée au client. -Alternatively, add `'use server';` at the very top of a file to mark all exports within that file as async server functions that can be used anywhere, including imported in client component files. +Vous pouvez aussi utiliser `'use server';` tout en haut d'un fichier pour indiquer que tous les exports de ce fichier sont des fonctions serveur asynchrones qui peuvent être utilisées depuis n'importe où, y compris par import dans des fichiers de composants côté client. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* Remember that parameters to functions marked with `'use server'` are fully client-controlled. For security, always treat them as untrusted input, making sure to validate and escape the arguments as appropriate. -* To avoid the confusion that might result from mixing client- and server-side code in the same file, `'use server'` can only be used in server-side files; the resulting functions can be passed to client components through props. -* Because the underlying network calls are always asynchronous, `'use server'` can be used only on async functions. -* Directives like `'use server'` must be at the very beginning of their function or file, above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.) +* Gardez à l'esprit que les paramètres des fonctions marquées par `'use server'` sont entièrement contrôlés par le client. Pour une meilleure sécurité, traitez-les toujours commes des entrées non vérifiées, et assurez-vous de les valider et d'en échapper le contenu lorsque nécessaire. +* Pour éviter toute confusion qui pourrait résulter du mélange entre codes côté client et côté serveur au sein d'un même fichier, `'use server'` ne peut être utilisée que dans des fichiers côté serveur. Les fonctions résultantes peuvent être passées à des composants côté client *via* leurs props. +* Puisque les appels réseaux sous-jacents sont intrinsèquement asynchrones, `'use server'` ne peut être utilisée que pour des fonctions asynchrones. +* Les directives telles que `'use server'` doivent être placées au tout début du fichier, au-dessus de tout import et de quelque autre code que ce soit (à l'exception des commentaires, qui peuvent apparaître avant). Elles doivent utiliser des apostrophes (`'`) ou guillemets (`"`), pas des apostrophes inverses (\`). (Le format de directive `'use xyz'` n'est pas sans rappeler la convention de nommage `useXyz()` des Hooks, mais c'est là une simple coïncidence.) -## Usage {/*usage*/} +## Utilisation {/*usage*/} -This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components). +Cette section est incomplète. Consultez la [documentation Next.js des Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).