From 286459334fdb6ae64cb6103d985450f2d05e0d96 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 17 Oct 2024 11:53:47 +0200 Subject: [PATCH 1/4] i18n(fr): update `server-side-rendering.mdx` See #9700 --- .../docs/fr/guides/server-side-rendering.mdx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/content/docs/fr/guides/server-side-rendering.mdx b/src/content/docs/fr/guides/server-side-rendering.mdx index ffc068950ec33..0f09ac6d2c78e 100644 --- a/src/content/docs/fr/guides/server-side-rendering.mdx +++ b/src/content/docs/fr/guides/server-side-rendering.mdx @@ -226,10 +226,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; @@ -256,12 +260,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); @@ -273,6 +279,11 @@ if (!product) { statusText: 'Non trouvé' }); } + +// Le produit n'est plus disponible +if (!product.isAvailable) { + return Astro.redirect("/products", 301); +} --- From 1e700753fcf985c54902b1a548962469de3ef101 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 17 Oct 2024 12:23:29 +0200 Subject: [PATCH 2/4] fix typo, use Steps and small rewording --- .../docs/fr/guides/server-side-rendering.mdx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/content/docs/fr/guides/server-side-rendering.mdx b/src/content/docs/fr/guides/server-side-rendering.mdx index 0f09ac6d2c78e..a449cac4a999f 100644 --- a/src/content/docs/fr/guides/server-side-rendering.mdx +++ b/src/content/docs/fr/guides/server-side-rendering.mdx @@ -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 : @@ -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. @@ -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. @@ -76,6 +77,7 @@ Vous pouvez également ajouter un adaptateur manuellement en installant le paque Par exemple, pour installer manuellement l'adaptateur Vercel : + 1. Installez l'adaptateur dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré : @@ -96,7 +98,7 @@ Par exemple, pour installer manuellement l'adaptateur Vercel : -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 @@ -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` + ### 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'; @@ -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} --- @@ -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; @@ -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. :::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 @@ -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} --- From 959c9453bd8440e8c09870c6bd3677a4792546a5 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 17 Oct 2024 12:31:06 +0200 Subject: [PATCH 3/4] fix typo --- src/content/docs/fr/guides/server-side-rendering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/server-side-rendering.mdx b/src/content/docs/fr/guides/server-side-rendering.mdx index a449cac4a999f..6c14b402f1c7e 100644 --- a/src/content/docs/fr/guides/server-side-rendering.mdx +++ b/src/content/docs/fr/guides/server-side-rendering.mdx @@ -12,7 +12,7 @@ Astro vous permet d'opter pour un **rendu à la demande** pour une partie ou la 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*. +- 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 : From a7a8f4ab1db614217b609261ca9f5fabc67ee5d5 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 17 Oct 2024 12:40:50 +0200 Subject: [PATCH 4/4] fix broken links --- src/content/docs/fr/basics/rendering-modes.mdx | 4 ++-- src/content/docs/fr/guides/actions.mdx | 2 +- src/content/docs/fr/guides/middleware.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/docs/fr/basics/rendering-modes.mdx b/src/content/docs/fr/basics/rendering-modes.mdx index 1a55c8a8c806f..9d3809c698c8f 100644 --- a/src/content/docs/fr/basics/rendering-modes.mdx +++ b/src/content/docs/fr/basics/rendering-modes.mdx @@ -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)**. -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.. +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.. -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. diff --git a/src/content/docs/fr/guides/actions.mdx b/src/content/docs/fr/guides/actions.mdx index a1b80b77d86e2..9d74cc6506d57 100644 --- a/src/content/docs/fr/guides/actions.mdx +++ b/src/content/docs/fr/guides/actions.mdx @@ -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 `
`. 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. diff --git a/src/content/docs/fr/guides/middleware.mdx b/src/content/docs/fr/guides/middleware.mdx index 1401dd175aca6..9e6ad22fc941f 100644 --- a/src/content/docs/fr/guides/middleware.mdx +++ b/src/content/docs/fr/guides/middleware.mdx @@ -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.