Skip to content

Commit

Permalink
fix typo, use Steps and small rewording
Browse files Browse the repository at this point in the history
  • Loading branch information
ArmandPhilippot committed Oct 17, 2024
1 parent 2864593 commit 1e70075
Showing 1 changed file with 22 additions and 18 deletions.
40 changes: 22 additions & 18 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 ré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 @@ -292,13 +296,13 @@ if (!product.isAvailable) {

### `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

0 comments on commit 1e70075

Please sign in to comment.