Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(fr): update guides/server-side-rendering.mdx #9716

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/fr/basics/rendering-modes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ Avec [un adaptateur SSR](/fr/guides/server-side-rendering/), les deux autres mod

Puisqu'ils sont générés à chaque visite, ces itinéraires peuvent être personnalisés pour chaque visiteur. Par exemple, une page rendue à la demande peut montrer à un utilisateur connecté ses informations de compte ou afficher des données fraîchement mises à jour sans nécessiter une reconstruction complète du site. Le rendu à la demande sur le serveur au moment de la requête est également connu sous le nom de **server-side rendering (SSR)**.

<ReadMore>En savoir plus sur [les fonctionnalités disponibles avec le rendu à la demande et un adaptateur](/fr/guides/server-side-rendering/#fonctions-de-rendu-à-la-demande), telles que les cookies, les objets Response et Request, le streaming HTML, et plus encore.</ReadMore>.
<ReadMore>En savoir plus sur [les fonctionnalités disponibles avec le rendu à la demande et un adaptateur](/fr/guides/server-side-rendering/#fonctionnalités-de-rendu-à-la-demande), telles que les cookies, les objets Response et Request, le streaming HTML, et plus encore.</ReadMore>.

Envisagez d'activer le [mode "serveur" ou "hybride"](/fr/guides/server-side-rendering/#fonctions-de-rendu-à-la-demande) dans votre projet Astro si vous avez besoin de ce qui suit :
Envisagez d'activer le [mode "serveur" ou "hybride"](/fr/guides/server-side-rendering/#fonctionnalités-de-rendu-à-la-demande) dans votre projet Astro si vous avez besoin de ce qui suit :

- **Points de terminaison d'API** : Créer des pages spécifiques qui fonctionnent comme des points de terminaison API pour des tâches telles que l'accès à la base de données, l'authentification et l'autorisation, tout en gardant les données sensibles cachées au client.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/guides/actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ if (isInputError(error)) {
## Appeler des actions depuis une action de formulaire HTML

:::note
Les pages doivent être rendues à la demande lors de l'appel d'actions à l'aide d'une action de formulaire. [Assurez-vous que le prérendu est désactivé sur la page](/fr/guides/server-side-rendering/#désactiver-le-pré-rendu-en-mode-hybride) avant d'utiliser cette API.
Les pages doivent être rendues à la demande lors de l'appel d'actions à l'aide d'une action de formulaire. [Assurez-vous que le prérendu est désactivé sur la page](/fr/guides/server-side-rendering/#désactiver-le-pré-rendu-en-mode-hybrid) avant d'utiliser cette API.
:::

Vous pouvez activer les soumissions de formulaires zéro-JS avec des attributs standard sur n'importe quel élément `<form>`. Les soumissions de formulaires sans JavaScript côté client peuvent être utiles à la fois comme solution de secours en cas d'échec du chargement de JavaScript ou si vous préférez gérer les formulaires entièrement à partir du serveur.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/guides/middleware.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import Since from '~/components/Since.astro';

**Middleware** vous permet d'intercepter les demandes et les réponses et d'injecter des comportements de manière dynamique chaque fois qu'une page ou un point de terminaison est sur le point d'être rendu. Ce rendu a lieu au moment de la construction pour toutes les pages pré-rendues, mais il a lieu lorsque la route est demandée pour les pages rendues à la demande, rendant disponible [des fonctionnalités SSR supplémentaires telles que les cookies et les en-têtes](/fr/guides/server-side-rendering/#fonctions-de-rendu-à-la-demande).
**Middleware** vous permet d'intercepter les demandes et les réponses et d'injecter des comportements de manière dynamique chaque fois qu'une page ou un point de terminaison est sur le point d'être rendu. Ce rendu a lieu au moment de la construction pour toutes les pages pré-rendues, mais il a lieu lorsque la route est demandée pour les pages rendues à la demande, rendant disponible [des fonctionnalités SSR supplémentaires telles que les cookies et les en-têtes](/fr/guides/server-side-rendering/#fonctionnalités-de-rendu-à-la-demande).

Le middleware vous permet également de définir et de partager des informations spécifiques aux requêtes entre les points de terminaison et les pages en modifiant un objet `locals` disponible dans tous les composants Astro et les points de terminaison de l'API. Cet objet est disponible même lorsque ce middleware s'exécute au moment de la construction.

Expand Down
59 changes: 37 additions & 22 deletions src/content/docs/fr/guides/server-side-rendering.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ title: Adaptateurs de rendu à la demande
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import RecipeLinks from '~/components/RecipeLinks.astro';
import IntegrationsNav from '~/components/IntegrationsNav.astro';

Astro vous permet d'opter pour un **rendu à la demande** pour une partie ou la totalité de vos pages et de vos points de terminaison. C'est ce qu'on appelle le **server-side rendering (SSR)** : il s'agit de générer des pages HTML sur le serveur lorsqu'elles sont demandées et de les envoyer au client. Un **adaptateur** est utilisé pour exécuter votre projet sur le serveur et gérer ces demandes.

Ce rendu à la demande vous permet de :
- d'implémenter des sessions pour l'état de connexion dans votre application
- Rendre les données d'une API appelée dynamiquement avec `fetch()`.
- Déployer votre site sur un hôte en utilisant un *adaptateur*.
Ce rendu à la demande vous permet :
- D'implémenter des sessions pour l'état de connexion dans votre application
- De rendre les données d'une API appelée dynamiquement avec `fetch()`.
- De déployer votre site sur un hôte en utilisant un *adaptateur*.

Envisagez d'activer le rendu de serveur à la demande dans votre projet Astro si vous avez besoin de ce qui suit :

Expand All @@ -35,8 +36,8 @@ Les deux modes de rendu à la demande d'Astro (`server` et `hybrid`) vous permet

Pour décider laquelle utiliser dans votre projet, choisissez l'option `output` qui représente comment **la plupart** de vos pages et routes seront rendues :

- __`output : 'server'`__ : Rendu à la demande par défaut. Utilisez cette option lorsque la plupart ou la totalité de votre site ou application doit être rendue sur le serveur à la demande. Chaque page individuelle ou point d'arrivée peut *opter* pour un pré-rendu.
- __`output : 'hybrid'`__ : Pré-rendu en HTML par défaut. Utilisez cette option lorsque la majeure partie de votre site doit être statique. Chaque page individuelle ou point de terminaison peut *s'exclure* du pré-rendu.
- __`output: 'server'`__ : Rendu à la demande par défaut. Utilisez cette option lorsque la plupart ou la totalité de votre site ou application doit être rendue sur le serveur à la demande. Chaque page individuelle ou point d'arrivée peut *opter* pour un pré-rendu.
- __`output: 'hybrid'`__ : Pré-rendu en HTML par défaut. Utilisez cette option lorsque la majeure partie de votre site doit être statique. Chaque page individuelle ou point de terminaison peut *s'exclure* du pré-rendu.

Parce que le serveur devra générer au moins quelques pages à la demande, ces deux modes nécessitent que vous [ajoutiez un adaptateur](#ajouter-un-adaptateur) pour exécuter les fonctions du serveur.

Expand All @@ -46,7 +47,7 @@ Pour déployer un projet en mode `server` ou `hybrid`, vous devez ajouter un **a

Vous pouvez trouver les [adaptateurs officiels et communautaires dans notre répertoire d'intégrations](https://astro.build/integrations/?search=&categories%5B%5D=adapters). Choisissez celui qui correspond à votre [environnement de déploiement](/fr/guides/deploy/).

#### Installer `astro add`
#### Installation avec `astro add`

Vous pouvez ajouter n'importe lequel des [adaptateurs officiels maintenus par Astro](/fr/guides/integrations-guide/#intégrations-officielles) avec la commande `astro add` suivante. Cela installera l'adaptateur et apportera les changements appropriés à votre fichier `astro.config.mjs` en une seule étape.

Expand Down Expand Up @@ -76,6 +77,7 @@ Vous pouvez également ajouter un adaptateur manuellement en installant le paque

Par exemple, pour installer manuellement l'adaptateur Vercel :

<Steps>
1. Installez l'adaptateur dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

<PackageManagerTabs>
Expand All @@ -96,7 +98,7 @@ Par exemple, pour installer manuellement l'adaptateur Vercel :
</Fragment>
</PackageManagerTabs>

2. [ajoutez l'adapter](/fr/reference/configuration-reference/#adapter) à votre fichier `astro.config.mjs` d'importation et d'exportation par défaut, ainsi que votre mode de `sortie` désiré :
2. [Ajoutez l'adaptateur](/fr/reference/configuration-reference/#adapter) à l'importation et à l'exportation par défaut de votre fichier `astro.config.mjs`, ainsi que votre mode de sortie (`output`) désiré :

```js ins={3,7} {6}
// astro.config.mjs
Expand All @@ -110,12 +112,13 @@ Par exemple, pour installer manuellement l'adaptateur Vercel :
```

Notez que les différents adaptateurs peuvent également avoir des paramètres de configuration différents. Lisez la documentation de chaque adaptateur, et appliquez toutes les options de configuration nécessaires à l'adaptateur que vous avez choisi dans `astro.config.mjs`
</Steps>

### Configurer `server` ou `hybrid`

Pour activer le rendu à la demande, vous devez mettre à jour votre configuration `output` avec l'un des deux modes de rendu serveur.

Par exemple, pour configurer une application très dynamique où chaque page est rendue à la demande par défaut, ajoutez `output : 'server'` à votre configuration Astro :
Par exemple, pour configurer une application très dynamique où chaque page est rendue à la demande par défaut, ajoutez `output: 'server'` à votre configuration Astro :

```js ins={5} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
Expand All @@ -131,7 +134,7 @@ export default defineConfig({

### Accepter le pré-rendu en mode `server`

Pour une application dont le rendu est principalement effectué par le serveur et configuré comme `output : server`, ajoutez `export const prerender = true` à n'importe quelle page ou route pour pré-rendre une page statique ou un point de terminaison :
Pour une application dont le rendu est principalement effectué par le serveur et configuré comme `output: server`, ajoutez `export const prerender = true` à n'importe quelle page ou route pour pré-rendre une page statique ou un point de terminaison :

```astro title="src/pages/mypage.astro" {2}
---
Expand Down Expand Up @@ -165,9 +168,9 @@ export async function GET() {
}
```

### Désactiver le pré-rendu en mode `hybride
### Désactiver le pré-rendu en mode `hybrid`

Pour un site principalement statique configuré en mode `output : hybrid`, ajoutez `export const prerender = false` à tous les fichiers qui doivent être rendus par le serveur à la demande :
Pour un site principalement statique configuré en mode `output: hybrid`, ajoutez `export const prerender = false` à tous les fichiers qui doivent être rendus par le serveur à la demande :

```js title="src/pages/randomnumber.js" {1}
export const prerender = false;
Expand All @@ -177,22 +180,23 @@ export async function GET() {
return new Response(
JSON.stringify({
number,
message: `Voici un numéro aléatoire: ${number}`,
message: `Voici un numéro aléatoire : ${number}`,
}),
);
}
```

## Fonctions de rendu à la demande
## Fonctionnalités de rendu à la demande

### Streaming HTML

Avec le streaming HTML, un document est divisé en morceaux, envoyé sur le réseau dans l'ordre, et rendu sur la page dans cet ordre. En mode "serveur" ou "hybride", Astro utilise le streaming HTML pour envoyer chaque composant au navigateur au fur et à mesure qu'il les rend. Cela permet à l'utilisateur de voir votre HTML aussi rapidement que possible, bien que les conditions du réseau puissent ralentir le téléchargement de documents volumineux et que l'attente des données puisse bloquer le rendu de la page.
Avec le streaming HTML, un document est divisé en morceaux, envoyé sur le réseau dans l'ordre, et rendu sur la page dans cet ordre. En mode `server` ou `hybrid`, Astro utilise le streaming HTML pour envoyer chaque composant au navigateur au fur et à mesure qu'il les rend. Cela permet à l'utilisateur de voir votre HTML aussi rapidement que possible, bien que les conditions du réseau puissent ralentir le téléchargement de documents volumineux et que l'attente des données puisse bloquer le rendu de la page.

<RecipeLinks slugs={["fr/recipes/streaming-improve-page-performance"]}/>

:::caution
Les fonctionnalités qui modifient les [Response headers] (https://developer.mozilla.org/fr/docs/Glossary/Response_header) ne sont disponibles qu'au niveau de la **page** (vous ne pouvez pas les utiliser à l'intérieur des composants, y compris les composants de mise en page). Lorsque Astro exécute le code de votre composant, il a déjà envoyé les en-têtes de réponse et ceux-ci ne peuvent pas être modifiés.
Les fonctionnalités qui modifient les [en-têtes de réponse](https://developer.mozilla.org/fr/docs/Glossary/Response_header) ne sont disponibles qu'au niveau de la **page** (vous ne pouvez pas les utiliser à l'intérieur des composants, y compris les composants de mise en page). Lorsque Astro exécute le code de votre composant, il a déjà envoyé les en-têtes de réponse et ceux-ci ne peuvent pas être modifiés.

:::

### Cookies
Expand Down Expand Up @@ -226,10 +230,14 @@ Voir plus de détails sur [`Astro.cookies` et le type `AstroCookie`](/fr/referen

L'exemple ci-dessous définit un état de réponse et un texte d'état pour une page de liste de produits lorsque le produit n'existe pas :

```astro title="src/pages/my-product.astro" {8-9}
```astro title="src/pages/product/[id].astro" {10,11}
---
export const prerender = false; // Pas nécessaire en mode `server`

import { getProduct } from '../api';

const product = await getProduct(Astro.params.id);

// Aucun produit trouvé
if (!product) {
Astro.response.status = 404;
Expand All @@ -256,12 +264,14 @@ Astro.response.headers.set('Cache-Control', 'public, max-age=3600');

#### Renvoyer un objet `Response`.

Vous pouvez également renvoyer un objet [Response](https://developer.mozilla.org/fr/docs/Web/API/Response) directement à partir de n'importe quelle page en utilisant l'affichage à la demande.
Vous pouvez également renvoyer un objet [Response](https://developer.mozilla.org/fr/docs/Web/API/Response) directement à partir de n'importe quelle page en utilisant l'affichage à la demande soit manuellement ou avec [`Astro.redirect`](/fr/reference/api-reference/#astroredirect).

L'exemple ci-dessous renvoie un message 404 sur une page dynamique après avoir recherché un identifiant dans la base de données :
L'exemple ci-dessous recherche un identifiant dans la base de données sur une page dynamique et soit il renvoie une erreur 404 quand le produit n'existe pas, soit il redirige l'utilisateur vers une autre page lorsque le produit n'est plus disponible, soit il affiche le produit :

```astro title="src/pages/[id].astro" {8-11}
```astro title="src/pages/[id].astro" {10-13, 18}
---
export const prerender = false; // Pas nécessaire en mode `server`

import { getProduct } from '../api';

const product = await getProduct(Astro.params.id);
Expand All @@ -273,6 +283,11 @@ if (!product) {
statusText: 'Non trouvé'
});
}

// Le produit n'est plus disponible
if (!product.isAvailable) {
return Astro.redirect("/products", 301);
}
---
<html>
<!-- Page ici... -->
Expand All @@ -281,13 +296,13 @@ if (!product) {

### `Request`

`Astro.request` est un objet [Request](https://developer.mozilla.org/fr/docs/Web/API/Request) standard. Il peut être utilisé pour obtenir l' `url`, les `headers`, la `method`, et même le corps de la requête.
`Astro.request` est un objet [Request](https://developer.mozilla.org/fr/docs/Web/API/Request) standard. Il peut être utilisé pour obtenir l'`url`, les `headers`, la `method`, et même le corps de la requête.

En mode `server` et `hybrid`, vous pouvez accéder à des informations supplémentaires à partir de cet objet pour les pages qui ne sont pas générées statiquement.

#### `Astro.request.headers`

Les en-têtes de la requête sont disponibles dans `Astro.request.headers`. Cela fonctionne comme le [`Request.headers`](https://developer.mozilla.org/fr/docs/Web/API/Request/headers) du navigateur. Il s'agit d'un objet [Headers](https://developer.mozilla.org/fr/docs/Web/API/Headers) dans lequel vous pouvez récupérer des en-têtes tels que le cookie.
Les en-têtes de la requête sont disponibles dans `Astro.request.headers`. Cela fonctionne comme la propriété [`Request.headers`](https://developer.mozilla.org/en-US/docs/Web/API/Request/headers) du navigateur. Il s'agit d'un objet [Headers](https://developer.mozilla.org/fr/docs/Web/API/Headers) dans lequel vous pouvez récupérer des en-têtes tels que le cookie.

```astro title="src/pages/index.astro" {2}
---
Expand Down
Loading