diff --git a/src/content/docs/fr/reference/integrations-reference.mdx b/src/content/docs/fr/reference/integrations-reference.mdx
index 6dc08d713a932..10d273bbe838a 100644
--- a/src/content/docs/fr/reference/integrations-reference.mdx
+++ b/src/content/docs/fr/reference/integrations-reference.mdx
@@ -194,18 +194,11 @@ export default {
-**Type :** (renderer: AstroRenderer) => void;
+**Type :** (renderer: AstroRenderer) => void;
**Exemples :** [`svelte`](https://github.com/withastro/astro/blob/main/packages/integrations/svelte/src/index.ts), [`react`](https://github.com/withastro/astro/blob/main/packages/integrations/react/src/index.ts), [`preact`](https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts), [`vue`](https://github.com/withastro/astro/blob/main/packages/integrations/vue/src/index.ts), [`solid`](https://github.com/withastro/astro/blob/main/packages/integrations/solid/src/index.ts)
-Une fonction de rappel pour ajouter un moteur de rendu de composants de framework (c'est-à-dire React, Vue, Svelte, etc.). Vous pouvez consulter les exemples et la définition des types ci-dessus pour des options plus avancées, mais voici les deux principales options à connaître :
-
-- `clientEntrypoint` - chemin d'accès à un fichier qui s'exécute sur le client chaque fois que votre composant est utilisé. Ce fichier sert principalement à afficher ou à hydrater votre composant avec JS.
-- `serverEntrypoint` - chemin d'accès à un fichier qui s'exécute lors des requêtes côté serveur ou des compilations statiques, chaque fois que votre composant est utilisé. Ces fichiers devraient restituer les composants en un balisage statique, avec des hooks d'hydratation, le cas échéant. [Le callback `renderToString` de React](https://react.dev/reference/react-dom/server/renderToString) est un exemple classique.
-
-
-
-Les fonctions `clientEntrypoint` et `serverEntrypoint` acceptent une `URL`.
+Une fonction de rappel pour [ajouter un moteur de rendu de composants de framework](/fr/reference/renderer-reference/) (c'est-à-dire React, Vue, Svelte, etc.).
#### Option `addWatchFile()`
@@ -1438,7 +1431,6 @@ import type {
AstroIntegrationMiddleware,
AstroMiddlewareInstance,
AstroPrerenderer,
- AstroRenderer,
ClientDirectiveConfig,
HookParameters,
IntegrationResolvedRoute,
@@ -1447,8 +1439,6 @@ import type {
RoutePart,
RouteType,
SSRComponentMetadata,
- SSRLoadedRenderer,
- SSRLoadedRendererValue,
SSRManifest,
ValidRedirectStatus,
} from "astro";
@@ -1608,42 +1598,6 @@ Définit une méthode facultative décrivant comment afficher une page. Celle-ci
Définit une méthode facultative appelée une fois que toutes les pages sont pré-rendues. Ceci est utile pour effectuer des tâches de nettoyage telles que l'arrêt d'un serveur de prévisualisation.
-### `AstroRenderer`
-
-
-
-**Type :** `{ name: string; clientEntrypoint?: string | URL; serverEntrypoint: string | URL; }`
-
-
-Décrit un [moteur de rendu de composants de framework ajouté par une intégration](#option-addrenderer).
-
-#### `AstroRenderer.name`
-
-
-
-**Type :** `string`
-
-
-Le nom du moteur de rendu de composants de framework.
-
-#### `AstroRenderer.clientEntrypoint`
-
-
-
-**Type :** `string | URL`
-
-
-Définit le chemin d'importation du moteur de rendu qui s'exécute côté client chaque fois que votre composant est utilisé.
-
-#### `AstroRenderer.serverEntrypoint`
-
-
-
-**Type :** `string | URL`
-
-
-Définit le chemin d'importation du moteur de rendu qui s'exécute lors des requêtes côté serveur ou des compilations statiques chaque fois que votre composant est utilisé.
-
### `ClientDirectiveConfig`
@@ -2028,152 +1982,6 @@ Une description de la manière d'afficher le contenu de l'en-tête à partir de
Détermine si le composant contient le contenu de l'en-tête.
-### `SSRLoadedRenderer`
-
-
-
-**Type :** `{ name: string; clientEntrypoint?: string | URL; ssr: SSRLoadedRendererValue; }`
-
-
-Décrit un moteur de rendu disponible pour le serveur. Il s'agit d'un sous-ensemble de [`AstroRenderer`](#astrorenderer) avec des propriétés supplémentaires.
-
-#### `SSRLoadedRenderer.ssr`
-
-
-
-**Type :** [`SSRLoadedRendererValue`](#ssrloadedrenderervalue)
-
-
-Définit les fonctions et la configuration utilisées par le serveur pour ce framework.
-
-### `SSRLoadedRendererValue`
-
-Contient les fonctions et la configuration nécessaires pour générer les composants sur le serveur à partir d'un framework d'interface utilisateur spécifique.
-
-#### `SSRLoadedRendererValue.name`
-
-
-
-**Type :** `string`
-
-
-Spécifie le nom identifiant le moteur de rendu.
-
-#### `SSRLoadedRendererValue.check()`
-
-
-
-**Type :** `(Component: any, props: Record, children: Record, metadata?: AstroComponentMetadata) => Promise`
-
-
-Détermine si le moteur de rendu doit gérer le composant. Appelée pour chaque moteur de rendu enregistré jusqu'à ce que l'un d'eux renvoie `true`.
-
-La fonction reçoit le constructeur ou la fonction du composant, ses propriétés, le contenu du slot et un objet optionnel [`metadata`](#astrocomponentmetadata) contenant des informations sur la directive d'hydratation et la source du composant.
-
-#### `SSRLoadedRendererValue.renderToStaticMarkup()`
-
-
-
-**Type :** `(Component: any, props: Record, children: Record, metadata?: AstroComponentMetadata) => Promise<{ html: string; attrs?: Record; }>`
-
-
-Génère un composant de framework sous forme de balisage HTML statique sur le serveur.
-
-La fonction reçoit le constructeur ou la fonction du composant, ses propriétés, le contenu du slot et un objet [`metadata`](#astrocomponentmetadata) optionnel. Les moteurs de rendu peuvent utiliser `metadata` pour déterminer si le composant sera hydraté côté client, ce qui peut s'avérer utile pour inclure conditionnellement l'état d'hydratation côté client.
-
-#### `SSRLoadedRendererValue.supportsAstroStaticSlot`
-
-
-
-**Type :** `boolean`
-
-
-
-Indique si le moteur de rendu prend en charge l'optimisation des slots statiques d'Astro. Lorsque cette option est activée, Astro empêche la suppression des slots imbriqués au sein des îlots.
-
-#### `SSRLoadedRendererValue.renderHydrationScript()`
-
-
-
-**Type :** `() => string`
-
-
-
-Renvoie un script d'hydratation spécifique au framework qui doit être injecté dans le HTML avant le premier composant utilisant ce moteur de rendu.
-
-### `AstroComponentMetadata`
-
-
-
-**Type :** `{ displayName: string; hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only'; hydrateArgs?: any; componentUrl?: string; componentExport?: { value: string; namespace?: boolean }; astroStaticSlot: true; }`
-
-
-Un objet transmis en tant que quatrième argument aux fonctions [`check()`](#ssrloadedrenderervaluecheck) et [`renderToStaticMarkup()`](#ssrloadedrenderervaluerendertostaticmarkup) d'un moteur de rendu. Contient des informations sur le composant rendu, y compris sa directive d'hydratation.
-
-#### `AstroComponentMetadata.displayName`
-
-
-
-**Type :** `string`
-
-
-Le nom d'affichage du composant, utilisé pour les messages d'erreur et le débogage.
-
-#### `AstroComponentMetadata.hydrate`
-
-
-
-**Type :** `'load' | 'idle' | 'visible' | 'media' | 'only' | undefined`
-
-
-La [directive client](/fr/reference/directives-reference/#directives-client) utilisée sur le composant, le cas échéant. Lorsque la valeur est `undefined`, le composant ne sera pas hydraté côté client.
-
-Les moteurs de rendu peuvent utiliser cette valeur pour inclure conditionnellement l'état d'hydratation côté client. Par exemple, un moteur de rendu peut ignorer la sérialisation de l'état de transfert pour les composants qui ne seront pas hydratés :
-
-```ts
-async function renderToStaticMarkup(Component, props, children, metadata) {
- const willHydrate = !!metadata?.hydrate;
- // Ignorer la sérialisation de l'état d'hydratation quand le composant ne sera pas hydraté.
- return render(Component, props, { includeTransferState: willHydrate });
-}
-```
-
-#### `AstroComponentMetadata.hydrateArgs`
-
-
-
-**Type :** `any`
-
-
-Arguments supplémentaires pour la directive d'hydratation. Par exemple, la valeur de `client:media="(max-width: 768px)"` serait `"(max-width: 768px)"`. Pour `client:only="react"`, la valeur serait `"react"`.
-
-#### `AstroComponentMetadata.componentUrl`
-
-
-
-**Type :** `string | undefined`
-
-
-L'URL du fichier source du composant.
-
-#### `AstroComponentMetadata.componentExport`
-
-
-
-**Type :** `{ value: string; namespace?: boolean } | undefined`
-
-
-Informations relatives à l'exportation du composant. La propriété `value` correspond au nom de l'exportation (par exemple, `"default"` pour les exportations par défaut).
-
-#### `AstroComponentMetadata.astroStaticSlot`
-
-
-
-**Type :** `true`
-
-
-Toujours `true`. Indique qu'Astro prend en charge l'optimisation statique des slots pour ce composant. Les moteurs de rendu qui définissent [`supportsAstroStaticSlot`](#ssrloadedrenderervaluesupportsastrostaticslot) sur `true` peuvent l'utiliser en combinaison avec [`hydrate`](#astrocomponentmetadatahydrate) pour déterminer comment rendre les slots.
-
### `SSRManifest`
Un objet contenant la configuration de compilation et les métadonnées du projet que les adaptateurs serveur utilisent au moment de l'exécution pour servir des pages rendues à la demande.
@@ -2314,7 +2122,7 @@ Spécifie le [préfixe configuré pour les liens vers les ressources générées
-**Type :** SSRLoadedRenderer[]
+**Type :** SSRLoadedRenderer[]
Une liste des moteurs de rendu (par exemple React, Vue, Svelte, MDX) disponibles pour le serveur.
@@ -2381,7 +2189,7 @@ Définit une correspondance entre les identifiants des composants et leurs méta
-**Type :** `{ page: ImportComponentInstance; onRequest?: MiddlewareHandler; renderers: SSRLoadedRenderer[]; }`
+**Type :** `{ page: ImportComponentInstance; onRequest?: MiddlewareHandler; }`
diff --git a/src/content/docs/fr/reference/renderer-reference.mdx b/src/content/docs/fr/reference/renderer-reference.mdx
new file mode 100644
index 0000000000000..7661d55321102
--- /dev/null
+++ b/src/content/docs/fr/reference/renderer-reference.mdx
@@ -0,0 +1,330 @@
+---
+title: API des moteurs de rendu d'Astro
+sidebar:
+ label: API des moteurs de rendu
+i18nReady: true
+tableOfContents:
+ minHeadingLevel: 2
+ maxHeadingLevel: 3
+---
+import Since from '~/components/Since.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+Astro est conçu pour être compatible avec n'importe quel framework d'interface utilisateur. Cette capacité repose sur des moteurs de rendu, qui sont des [intégrations](/fr/reference/integrations-reference/). Consultez le [guide des frameworks front-end](/fr/guides/framework-components/) pour découvrir comment utiliser les composants d'interface utilisateur de différents frameworks dans Astro.
+
+## Qu'est-ce qu'un moteur de rendu ?
+
+Un moteur de rendu est un type particulier d'[intégration](/fr/reference/integrations-reference/) qui indique à Astro comment détecter et effectuer le rendu des syntaxes de composants qu'il ne gère pas nativement, telles que les [composants de frameworks d'interface utilisateur](/fr/guides/framework-components/). Un moteur de rendu se compose de deux parties :
+- un module serveur importé lors des phases de développement et de production pour effectuer le rendu des composants en HTML.
+- un module client optionnel importé dans le navigateur pour hydrater les composants avec des [directives client](/fr/reference/directives-reference/#directives-client).
+
+## Création d'un moteur de rendu
+
+Lorsque vous devez ajouter la prise en charge d'une nouvelle syntaxe de composant dans Astro, créez une intégration et appelez `addRenderer()` dans le hook [`astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup). Cela vous permet de définir le [point d'entrée du serveur](#création-dun-point-dentrée-de-serveur) qu'Astro doit utiliser pour le rendu des composants. Optionnellement, vous pouvez également définir le [point d'entrée du client](#création-dun-point-dentrée-de-client) utilisé pour l'hydratation.
+
+L'exemple suivant montre comment enregistrer un moteur de rendu dans une intégration Astro :
+
+```ts title="mon-moteur-de-rendu/index.js" {5-11}
+export default function createIntegration() {
+ return {
+ name: "@exemple/mon-moteur-de-rendu",
+ hooks: {
+ "astro:config:setup": ({ addRenderer }) => {
+ addRenderer({
+ name: "@exemple/mon-moteur-de-rendu",
+ clientEntrypoint: "@exemple/mon-moteur-de-rendu/client.js",
+ serverEntrypoint: "@exemple/mon-moteur-de-rendu/serveur.js",
+ });
+ },
+ },
+ };
+}
+```
+
+## Création d'un point d'entrée de serveur
+
+Vous devrez créer un fichier qui s'exécute lors du rendu côté serveur et qui définit comment effectuer le rendu de la syntaxe des composants. Le module serveur doit exporter par défaut un objet qui implémente l'interface [`SSRLoadedRendererValue`](#ssrloadedrenderervalue).
+
+L'exemple suivant montre un moteur de rendu côté serveur minimal implémentant `check()` et `renderToStaticMarkup()` :
+
+```ts title="mon-moteur-de-rendu/serveur.ts"
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue } from 'astro';
+
+async function check(Component: unknown) {
+ return typeof Component === 'function' && Component.name === 'MonComposantPersonnalise';
+}
+
+async function renderToStaticMarkup(
+ Component: any,
+ props: Record,
+ slots: Record,
+ metadata?: AstroComponentMetadata,
+) {
+ const rendered = Component(props);
+
+ return {
+ attrs: metadata?.hydrate ? { 'data-mon-moteur-de-rendu': 'true' } : undefined,
+ html: `<${rendered.tag}>${rendered.text}${slots.default ?? ''}`,
+ };
+}
+
+const renderer: NamedSSRLoadedRendererValue = {
+ name: 'mon-moteur-de-rendu',
+ check,
+ renderToStaticMarkup,
+};
+
+export default renderer;
+```
+
+## Création d'un point d'entrée de client
+
+Lorsque votre moteur de rendu prend en charge les [directives client](/fr/reference/directives-reference/#directives-client), créez un point d'entrée client qui définit comment hydrater les composants dans le navigateur. Le module client doit exporter par défaut une fonction recevant l'élément de l'îlot et renvoyant une fonction d'hydratation asynchrone.
+
+Astro déclenche un événement personnalisé `astro:unmount` sur l'élément racine de l'îlot chaque fois qu'un îlot est supprimé de la page. Vous pouvez écouter cet événement dans votre point d'entrée client pour nettoyer l'état de toute application montée.
+
+L'exemple suivant montre un point d'entrée client minimal qui hydrate les composants dans le navigateur :
+
+```ts title="mon-moteur-de-rendu/client.ts"
+export default (element: HTMLElement) =>
+ async (
+ Component: any,
+ props: Record,
+ slots: Record,
+ { client }: { client: string },
+ ) => {
+ const rendered = Component({ ...props, slots });
+
+ if (client === 'only') {
+ element.innerHTML = '';
+ }
+
+ const node = document.createElement(rendered.tag);
+ node.textContent = rendered.text;
+ element.appendChild(node);
+
+ element.addEventListener('astro:unmount', () => node.remove(), { once: true });
+ };
+```
+
+## Référence des types du moteur de rendu
+
+Les types suivants peuvent être importés depuis le module `astro` :
+
+```ts
+import type {
+ AstroComponentMetadata,
+ AstroRenderer,
+ NamedSSRLoadedRendererValue,
+ SSRLoadedRenderer,
+ SSRLoadedRendererValue,
+} from "astro";
+```
+
+### `AstroComponentMetadata`
+
+
+
+**Type :** `{ displayName: string; hydrate?: 'load' | 'idle' | 'visible' | 'media' | 'only'; hydrateArgs?: any; componentUrl?: string; componentExport?: { value: string; namespace?: boolean }; astroStaticSlot: true; }`
+
+
+Contient des informations sur le composant en cours de rendu, y compris sa directive d'hydratation.
+
+#### `AstroComponentMetadata.displayName`
+
+
+
+**Type :** `string`
+
+
+Définit le nom du composant, utilisé pour les messages d'erreur et le débogage.
+
+#### `AstroComponentMetadata.hydrate`
+
+
+
+**Type :** `'load' | 'idle' | 'visible' | 'media' | 'only'`
+
+
+Définit la [directive client](/fr/reference/directives-reference/#directives-client) utilisée sur le composant. Si aucune valeur n'est fournie, le composant ne sera pas hydraté côté client.
+
+Les moteurs de rendu peuvent utiliser cette valeur pour inclure conditionnellement l'état d'hydratation côté client. Par exemple, un moteur de rendu peut ignorer la sérialisation de l'état de transfert pour les composants qui ne seront pas hydratés :
+
+```ts
+async function renderToStaticMarkup(Component, props, children, metadata) {
+ const willHydrate = !!metadata?.hydrate;
+ // Ignorer la sérialisation de l'état d'hydratation si le composant ne sera pas hydraté.
+ return render(Component, props, { includeTransferState: willHydrate });
+}
+```
+
+#### `AstroComponentMetadata.hydrateArgs`
+
+
+
+**Type :** `any`
+
+
+Spécifie les arguments supplémentaires passés à la directive d'hydratation.
+
+Par exemple, cela pourrait être la chaîne de caractères correspondant à la requête média définie dans `client:media` (c'est-à-dire `"(max-width: 768px)"`) ou l'indication du moteur de rendu pour `client:only` (c'est-à-dire `"react"`).
+
+#### `AstroComponentMetadata.componentUrl`
+
+
+
+**Type :** `string`
+
+
+Définit l'URL du fichier source du composant.
+
+#### `AstroComponentMetadata.componentExport`
+
+
+
+**Type :** `{ value: string; namespace?: boolean }`
+
+
+Décrit l'exportation du composant qu'Astro chargera côté client pour les composants hydratés.
+
+##### `AstroComponentMetadata.componentExport.namespace`
+
+
+
+**Type :** `boolean`
+
+
+Indique si l'exportation est une exportation d'espace de noms.
+
+##### `AstroComponentMetadata.componentExport.value`
+
+
+
+**Type :** `string`
+
+
+Définit le nom de l'exportation (par exemple `"default"` pour les exportations par défaut).
+
+#### `AstroComponentMetadata.astroStaticSlot`
+
+
+
+**Type :** `true`
+
+
+Indique qu'Astro prend en charge l'optimisation des slots statiques pour ce composant. Les moteurs de rendu qui définissent [`supportsAstroStaticSlot`](#ssrloadedrenderervaluesupportsastrostaticslot) sur `true` peuvent utiliser cela en combinaison avec [`hydrate`](#astrocomponentmetadatahydrate) pour déterminer comment effectuer le rendu des slots.
+
+### `AstroRenderer`
+
+
+
+**Type :** `{ name: string; clientEntrypoint?: string | URL; serverEntrypoint: string | URL; }`
+
+
+Décrit un [moteur de rendu de composant ajouté par une intégration](/fr/reference/integrations-reference/#option-addrenderer).
+
+#### `AstroRenderer.name`
+
+
+
+**Type :** `string`
+
+
+Définit le nom public unique du moteur de rendu.
+
+#### `AstroRenderer.clientEntrypoint`
+
+
+
+**Type :** `string | URL`
+
+
+Définit le chemin d'importation du moteur de rendu qui s'exécute côté client chaque fois que votre composant est utilisé.
+
+#### `AstroRenderer.serverEntrypoint`
+
+
+
+**Type :** `string | URL`
+
+
+Définit le chemin d'importation du moteur de rendu qui s'exécute lors des requêtes côté serveur ou des compilations statiques chaque fois que votre composant est utilisé.
+
+### `NamedSSRLoadedRendererValue`
+
+Étend [`SSRLoadedRendererValue`](#ssrloadedrenderervalue) avec une propriété `name` obligatoire.
+
+### `SSRLoadedRenderer`
+
+
+
+**Type :** Pick\<AstroRenderer, 'name' | 'clientEntrypoint'\> & \{ ssr: SSRLoadedRendererValue; \}
+
+
+Décrit un moteur de rendu disponible pour le serveur. Il s'agit d'un sous-ensemble de [`AstroRenderer`](#astrorenderer) avec des propriétés supplémentaires.
+
+#### `SSRLoadedRenderer.ssr`
+
+
+
+**Type :** [`SSRLoadedRendererValue`](#ssrloadedrenderervalue)
+
+
+Définit les fonctions et la configuration utilisées par le serveur pour ce framework.
+
+### `SSRLoadedRendererValue`
+
+
+
+**Type :** `object`
+
+
+Contient les fonctions et la configuration nécessaires pour effectuer le rendu des composants côté serveur à partir d'un framework UI spécifique.
+
+#### `SSRLoadedRendererValue.name`
+
+
+
+**Type :** `string`
+
+
+Spécifie le nom identifiant le moteur de rendu.
+
+#### `SSRLoadedRendererValue.check()`
+
+
+
+**Type :** (Component: any, props: any, slots: Record\, metadata?: AstroComponentMetadata) => Promise\
+
+
+Détermine si le moteur de rendu peut gérer un composant. Cette fonction est appelée pour chaque moteur de rendu enregistré jusqu'à ce que l'un d'eux renvoie `true`.
+
+#### `SSRLoadedRendererValue.renderToStaticMarkup()`
+
+
+
+**Type :** (Component: any, props: any, slots: Record\, metadata?: AstroComponentMetadata) => Promise\<\{ html: string; attrs?: Record\; \}\>
+
+
+Effectue le rendu d'un composant de framework côté serveur et renvoie la chaîne HTML résultante ainsi que les attributs optionnels à transmettre au point d'entrée côté client.
+
+#### `SSRLoadedRendererValue.supportsAstroStaticSlot`
+
+
+
+**Type :** `boolean`
+
+
+
+Indique si le moteur de rendu prend en charge l'optimisation des slots statiques d'Astro. Lorsque cette option est activée, Astro empêche la suppression des slots imbriqués au sein des îlots.
+
+#### `SSRLoadedRendererValue.renderHydrationScript()`
+
+
+
+**Type :** `() => string`
+
+
+
+Renvoie une chaîne HTML à injecter une seule fois par page, avant le premier composant hydraté géré par ce moteur de rendu. Ceci est utile pour les moteurs de rendu nécessitant une configuration d'hydratation au niveau de la page.