i18n(fr): Update concepts/* from #9240 (#10135)

* i18n(fr): Update `concepts/*` from #9240

Signed-off-by: Thomas Bonnet <[email protected]>

* i18n(fr): Update `concepts/*` from #9240

Signed-off-by: Thomas Bonnet <[email protected]>

* i18n(fr): Fix link islands L106 (waiting for reference/directive-reference)

Signed-off-by: Thomas Bonnet <[email protected]>

* Les îles côté client

Co-authored-by: Armand Philippot <[email protected]>

* Update src/content/docs/fr/concepts/islands.mdx

Co-authored-by: Armand Philippot <[email protected]>

* Removing Lit

* Îles

Co-authored-by: Armand Philippot <[email protected]>

---------

Signed-off-by: Thomas Bonnet <[email protected]>
Co-authored-by: Armand Philippot <[email protected]>

src/content/docs/fr/concepts/islands.mdx

@@ -1,12 +1,13 @@
 ---
-title: Les îles Astro
-description: "Les îles Astro (alias Component Islands) sont un modèle d'architecture web dont Astro est le pionnier. “L'architecture Islands“ a été inventée par l'architecte frontend d'Etsy, Katie Sylor-Miller, en 2019, et développée par le créateur de Preact, Jason Miller."
+title: Architecture des îles
+description: Découvrez comment l'architecture en îlots d'Astro contribue à la rapidité des sites.
 i18nReady: true
 ---
 
 import IslandsDiagram from '~/components/IslandsDiagram.astro';
+import ReadMore from '~/components/ReadMore.astro';
 
-Astro a mis au point et popularisé une architecture frontale appelée **Islands**. L'architecture Islands permet d'améliorer les performances frontales en évitant les modèles JavaScript monolithiques et en supprimant automatiquement tout JavaScript non essentiel de la page. Les développeurs continuent d'utiliser leurs composants d'interface utilisateur et frameworks préférés avec Astro et bénéficient toujours de ces avantages.
+Astro a contribué à la création et à la popularisation d'un nouveau modèle d'architecture Frontend appelé **Islands Architecture**. L'architecture en îles fonctionne en rendant la majorité de votre page en HTML rapide et statique, avec de plus petits « îlots » de JavaScript ajoutés lorsque l'interactivité ou la personnalisation est nécessaire sur la page (un carrousel d'images, par exemple). Cela permet d'éviter les charges utiles JavaScript monolithiques qui ralentissent la réactivité de nombreux autres frameworks Web JavaScript modernes.
 
 ## Un peu d'histoire
 
@@ -21,11 +22,21 @@ En revanche, la plupart des frameworks web basés sur JavaScript hydratent et re
 
 Les SPA ont leur place, même [intégrées dans une page Astro](/fr/guides/migrate-to-astro/from-create-react-app/). Mais les SPA n'ont pas la capacité native d'hydrater de manière sélective et stratégique, ce qui en fait un choix lourd pour la plupart des projets sur le web aujourd'hui.
 
-Astro est devenu populaire en tant que premier framework web JavaScript grand public avec une hydratation sélective intégrée, en utilisant ce modèle d'îlots de composants inventé par Sylor-Miller.
+Astro est devenu populaire en tant que premier framework web JavaScript grand public avec hydratation sélective intégrée, en utilisant le même modèle d'îlots de composants inventé par Sylor-Miller. Nous avons depuis élargi et fait évoluer le travail original de Sylor-Miller, qui a contribué à inspirer une approche similaire des îlots de composants pour le contenu rendu dynamiquement par le serveur.
 
 ## Qu'est-ce qu'un îlot ?
 
-**Dans Astro, un "îlot" fait référence à tout composant d'interface utilisateur interactif sur la page.** Pensez à un îlot comme à un widget interactif flottant dans une mer de HTML statique, léger et rendu par le serveur.
+Dans Astro, un îlot est un composant d'interface utilisateur amélioré sur une page HTML par ailleurs statique.
+
+Un [**îlot client**](#îlots-client) est un composant d'interface utilisateur JavaScript interactif qui est hydraté séparément du reste de la page, tandis qu'un [**îlot serveur**](#îlots-serveur) est un composant d'interface utilisateur dont le contenu dynamique est restitué par le serveur séparément du reste de la page.
+
+Les deux îlots exécutent des processus coûteux ou plus lents de manière indépendante, pour chaque composant, afin d'optimiser le chargement des pages.
+
+## Composants de l'îlot
+
+Les composants Astro sont les éléments constitutifs de votre modèle de page. Ils se présentent sous la forme d'un code HTML statique, sans exécution côté client.
+
+Considérez un îlot client comme un widget interactif flottant dans une mer de HTML statique, léger et rendu par le serveur. Des îlots serveur peuvent être ajoutés pour des éléments personnalisés ou dynamiques rendus par le serveur, tels que la photo de profil d'un visiteur connecté.
 
 <IslandsDiagram>
     <Fragment slot="headerApp">En-tête (île interactive)</Fragment>
@@ -51,7 +62,7 @@ Bien que la plupart des développeurs s'en tiennent à un seul framework d'inter
 - Convertir progressivement un site existant vers un autre framework sans temps d'arrêt.
 :::
 
-## Créer une île
+## Îlots client
 
 Par défaut, Astro rendra automatiquement chaque composant de l'interface utilisateur en HTML et CSS, **en supprimant automatiquement tout JavaScript côté client**. 
 
@@ -74,7 +85,7 @@ Avec Islands, le JavaScript côté client n'est chargé que pour les composants
 
 Et comme l'interaction est configurée au niveau du composant, vous pouvez gérer différentes priorités de chargement pour chaque composant en fonction de son utilisation. Par exemple, `client:idle` indique à un composant de se charger lorsque le navigateur devient inactif, et `client:visible` indique à un composant de ne se charger qu'une fois qu'il entre dans la fenêtre de visualisation.
 
-## Quels sont les avantages des îles ?
+<h3>Avantages des îlots de clients</h3>
 
 L'avantage le plus évident de construire avec les îles Astro est la performance : la majorité de votre site Web est convertie en HTML statique rapide et JavaScript n'est chargé que pour les composants individuels qui en ont besoin. JavaScript est l'un des éléments les plus lents à charger par octet, chaque octet est donc important.
 
@@ -84,4 +95,41 @@ Mieux encore, vous pouvez indiquer à Astro comment et quand effectuer le rendu
 
 Dans Astro, c'est à vous, en tant que développeur, d'indiquer explicitement à Astro les composants de la page qui doivent également être exécutés dans le navigateur. Astro n'hydrate que ce qui est nécessaire sur la page et laisse le reste de votre site en HTML statique.
 
-**Les îles sont le secret de l'histoire de la performance rapide par défaut d'Astro !**
+**Les îles côté client sont le secret de l'histoire de la performance rapide par défaut d'Astro !**
+
+<ReadMore>En savoir plus sur [l'utilisation des composants du framework JavaScript](/fr/guides/framework-components/) dans votre projet.</ReadMore>
+
+## Îlots serveur
+
+Les îlots de serveur sont un moyen de déplacer le code côté serveur coûteux ou lent hors du processus de rendu principal, ce qui permet de combiner facilement un HTML statique très performant et des composants dynamiques générés par le serveur.
+
+Ajoutez la directive [`server:defer`](/fr/reference/directives-reference/#directives-serveur) à n'importe quel composant Astro de votre page pour le transformer en son propre îlot de serveur :
+
+```astro title="src/pages/index.astro" "server:defer"
+---
+import Avatar from '../components/Avatar.astro' ;
+---
+<Avatar server:defer />
+```
+
+Cela permet de diviser votre page en plus petites zones de contenu rendu par le serveur qui se chargent chacune en parallèle.
+
+Le contenu principal de votre page peut être rendu immédiatement avec un contenu de remplacement, tel qu'un avatar générique, jusqu'à ce que le contenu de votre île soit disponible. Avec les îlots de serveurs, la présence de petits éléments de contenu personnalisé ne retarde pas le rendu d'une page par ailleurs statique.
+
+Ce modèle de rendu a été conçu pour être portable. Il ne dépend d'aucune infrastructure de serveur et fonctionne donc avec n'importe quel hôte, qu'il s'agisse d'un serveur Node.js dans un conteneur Docker ou du fournisseur sans serveur de votre choix.
+
+<h3>Avantages des îlots de serveurs</h3>
+
+L'un des avantages des îlots de serveurs est la possibilité de rendre les parties les plus dynamiques de votre page à la volée. Cela permet à l'enveloppe extérieure et au contenu principal d'être mis en cache de manière plus agressive, ce qui permet d'obtenir des performances plus rapides.
+
+Un autre avantage est d'offrir une excellente expérience aux visiteurs. Les îlots du serveur sont optimisés et se chargent rapidement, souvent avant même que le navigateur n'ait peint la page. Mais pendant le court laps de temps nécessaire au rendu de vos îlots, vous pouvez afficher un contenu de repli personnalisé et empêcher tout changement de mise en page.
+
+Un exemple de site bénéficiant des îlots de serveurs Astro est une vitrine de commerce électronique. Bien que le contenu principal des pages de produits change rarement, ces pages comportent généralement des éléments dynamiques :
+
+- L'avatar de l'utilisateur dans l'en-tête.
+- Les offres spéciales et les ventes pour le produit.
+- Les commentaires des utilisateurs.
+
+En utilisant des îlots de serveur pour ces éléments, votre visiteur verra immédiatement la partie la plus importante de la page, votre produit. Les avatars génériques, les moteurs de chargement et les annonces du magasin peuvent être affichés en tant que contenu de secours jusqu'à ce que les éléments personnalisés soient disponibles.
+
+<ReadMore>En savoir plus sur [l'utilisation des îlots de serveurs](/fr/guides/server-islands/) dans votre projet.</ReadMore>

src/content/docs/fr/concepts/why-astro.mdx

@@ -15,7 +15,7 @@ i18nReady: true
 En voici quelques exemples :
 
 - **[Islands](/fr/concepts/islands/)** : Une architecture web basée sur des composants optimisée pour les sites web axés sur le contenu.
-- **[UI-agnostic](/fr/guides/framework-components/)** : Prend en charge React, Preact, Svelte, Vue, Solid, Lit, HTMX, les composants web, et bien plus encore.
+- **[UI-agnostic](/fr/guides/framework-components/)** : Prend en charge React, Preact, Svelte, Vue, Solid, HTMX, les composants web, et bien plus encore.
 - **[Server-first](/fr/guides/on-demand-rendering/)** : Déplace le rendu coûteux sur les appareils de vos visiteurs.
 - **[Zéro JS, par défaut](/fr/basics/astro-components/)** : Moins de JavaScript côté client pour ralentir votre site.
 - **[Collections de contenu](/fr/guides/content-collections/)** : Organisez, validez et fournissez la sécurité de type TypeScript pour votre contenu Markdown.
@@ -74,13 +74,13 @@ Un site Web Astro peut [se charger 40 % plus vite avec 90 % de JavaScript en moi
 
 **L'objectif d'Astro est d'être accessible à tous les développeurs Web**. Astro a été conçu pour être familier et accessible, quel que soit le niveau de compétence ou l'expérience passée en matière de développement Web.
 
-Nous avons commencé par nous assurer que vous pouviez utiliser tous les langages de composants d'interface utilisateur que vous connaissez déjà. React, Preact, Svelte, Vue, Solid, Lit et plusieurs autres sont tous pris en charge pour la création de nouveaux composants d'interface utilisateur dans un projet Astro.
+Nous avons commencé par nous assurer que vous pouviez utiliser tous les langages de composants d'interface utilisateur que vous connaissez déjà. React, Preact, Svelte, Vue, Solid et plusieurs autres sont tous pris en charge pour la création de nouveaux composants d'interface utilisateur dans un projet Astro.
 
 Nous voulions également nous assurer qu'Astro disposait d'un excellent langage de composants intégré. Pour ce faire, nous avons créé notre propre langage d'interface utilisateur `.astro`. Il est fortement influencé par le HTML : tout code HTML valide est déjà un composant Astro valide ! Mais il combine également certaines de nos fonctionnalités préférées empruntées à d'autres langages de composants, comme les expressions JSX (React) et le scoping CSS par défaut (Svelte et Vue). Cette proximité avec l'HTML facilite également l'utilisation d'améliorations progressives et de modèles d'accessibilité courants sans aucune surcharge.
 
 Astro a été conçu pour être moins complexe que les autres frameworks et langages d'interface utilisateur. L'une des principales raisons en est qu'Astro a été conçu pour être rendu sur le serveur, et non dans le navigateur. Cela signifie que vous n'avez pas à vous soucier des éléments suivants : hooks (React), stale closures (React également), refs (Vue), observables (Svelte), atoms, selectors, reactions, ou derivations. Il n'y a pas de réactivité sur le serveur, donc toute cette complexité disparaît.
 
-L'un de nos dictons préférés est le suivant : **opt-in to complexity** (s'ouvrir à la complexité) .
+L'un de nos dictons préférés est le suivant : **opt-in to complexity** (s'ouvrir à la complexité).
 Nous avons conçu Astro pour éliminer autant que possible la "complexité requise" de l'expérience du développeur, en particulier lors de la première prise en main. Vous pouvez créer un site d'exemple "Hello World" dans Astro avec seulement du HTML et du CSS. Ensuite, lorsque vous aurez besoin de construire quelque chose de plus puissant, vous pourrez accéder à de nouvelles fonctionnalités et API au fur et à mesure.
 
 ### Axé pour les développeurs