{"id":70247,"date":"2023-06-22T08:38:24","date_gmt":"2023-06-22T07:38:24","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=70247&#038;preview=true&#038;preview_id=70247"},"modified":"2023-10-25T12:47:52","modified_gmt":"2023-10-25T11:47:52","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/","title":{"rendered":"Qu&rsquo;est-ce qu&rsquo;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques"},"content":{"rendered":"<p>Le d\u00e9veloppement web a parcouru un long chemin depuis les premiers jours des sites web personnels statiques d&rsquo;une seule page. Aujourd&rsquo;hui, nous disposons d&rsquo;une pl\u00e9thore de langages, de frameworks et de <a href=\"https:\/\/kinsta.com\/fr\/blog\/systeme-gestion-contenu\/\">syst\u00e8mes de gestion de contenu<\/a> diff\u00e9rents qui ont \u00e9t\u00e9 cr\u00e9\u00e9s pour r\u00e9pondre \u00e0 tous les cr\u00e9neaux possibles et imaginables.<\/p>\n<p>C&rsquo;est l\u00e0 qu&rsquo;intervient Astro, l&rsquo;un des derniers-n\u00e9s des frameworks JavaScript.<\/p>\n<p>Cr\u00e9\u00e9 par Fred K. Schott et un groupe d&rsquo;autres contributeurs, Astro est rapidement devenu l&rsquo;un des favoris de la communaut\u00e9 des d\u00e9veloppeurs. Il s&rsquo;agit d&rsquo;un framework tout-en-un qui fonctionne un peu comme un g\u00e9n\u00e9rateur de site statique.<\/p>\n<p>Dans cet article, nous expliquerons pourquoi tant de d\u00e9veloppeurs appr\u00e9cient Astro et le pr\u00e9f\u00e8rent \u00e0 d&rsquo;autres solutions. Nous vous expliquerons \u00e9galement comment construire un blog bas\u00e9 sur le markdown en utilisant le framework.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce qu&rsquo;Astro ?<\/h2>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-logo.png\" alt=\"Astro\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/generateurs-sites-statiques-svelte\/#2-astro\">Astro<\/a>, ou Astro.js, est un <a href=\"https:\/\/kinsta.com\/fr\/blog\/generateurs-de-sites-statiques\/\">g\u00e9n\u00e9rateur de site statique<\/a> populaire con\u00e7u pour ceux qui souhaitent cr\u00e9er des sites web riches en contenu qui s&rsquo;ex\u00e9cutent rapidement et en douceur. Sa l\u00e9g\u00e8ret\u00e9, sa structure intuitive et sa courbe d&rsquo;apprentissage douce le rendent attrayant pour les d\u00e9veloppeurs de tous niveaux d&rsquo;exp\u00e9rience.<\/p>\n<p>Malgr\u00e9 sa petite taille, Astro est livr\u00e9 avec des outils puissants qui augmentent consid\u00e9rablement la flexibilit\u00e9 de votre site, vous permettant ainsi de gagner des heures dans la gestion du contenu et des th\u00e8mes. De plus, les d\u00e9veloppeurs ont la possibilit\u00e9 de travailler avec leurs frameworks pr\u00e9f\u00e9r\u00e9s en conjonction avec Astro &#8211; une perspective attrayante pour les codeurs chevronn\u00e9s qui ont d\u00e9j\u00e0 une foule de favoris.<\/p>\n<p>Voici quelques exemples de la fa\u00e7on dont Astro se d\u00e9marque de la concurrence :<\/p>\n<ul>\n<li><strong>Architecture en \u00eelots :<\/strong> Astro extrait votre interface utilisateur (UI) en composants plus petits et isol\u00e9s, appel\u00e9s \u00ab Astro Islands \u00bb, qui peuvent \u00eatre utilis\u00e9s sur n&rsquo;importe quelle page. Le JavaScript non utilis\u00e9 est remplac\u00e9 par du HTML l\u00e9ger.<\/li>\n<li><strong>Z\u00e9ro JavaScript (par d\u00e9faut) :<\/strong> Bien que vous puissiez utiliser tout le JavaScript que vous souhaitez pour cr\u00e9er vos sites web, Astro tentera de d\u00e9ployer z\u00e9ro JavaScript en production en transcrivant votre code pour vous. C&rsquo;est une approche parfaite si vous vous concentrez sur la vitesse du site.<\/li>\n<li><strong>SSG et SSR inclus :<\/strong> Astro a commenc\u00e9 comme un g\u00e9n\u00e9rateur de site statique (Static Site Generator ou SSG), mais en cours de route, il est devenu un framework qui utilise \u00e0 la fois la g\u00e9n\u00e9ration de site statique et le <a href=\"https:\/\/kinsta.com\/fr\/blog\/architecture-application-web\/#serversiderendered-architecture\">rendu c\u00f4t\u00e9 serveur (Server-Side Rendering ou SSR)<\/a>. Vous pouvez choisir les pages qui utiliseront l&rsquo;une ou l&rsquo;autre de ces approches.<\/li>\n<li><strong>Framework agnostique : <\/strong>Lorsque vous utilisez Astro, vous pouvez utiliser le <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">framework JavaScript<\/a> de votre choix, voire plusieurs frameworks \u00e0 la fois. (Nous y reviendrons plus en d\u00e9tail dans la suite de cet article)<\/li>\n<\/ul>\n<p>De plus, Astro est pr\u00eat \u00e0 l&#8217;emploi, ce qui signifie qu&rsquo;il peut \u00eatre d\u00e9ploy\u00e9 n&rsquo;importe o\u00f9, n&rsquo;importe quand, en toute simplicit\u00e9.<\/p>\n<p>Vous \u00eates pr\u00eat \u00e0 en savoir plus ? Dans ce cas, nous allons nous pencher sur le fonctionnement d&rsquo;Astro.<\/p>\n<h2>La structure d&rsquo;Astro<\/h2>\n<p>Avant d&rsquo;aller plus loin, il est important de comprendre comment Astro est structur\u00e9 pour que vous puissiez l&rsquo;utiliser efficacement. Jetons un coup d&rsquo;\u0153il \u00e0 la structure de base des fichiers d&rsquo;Astro :<\/p>\n<pre><code>\u251c\u2500\u2500 dist\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u2514\u2500\u2500 pages\/\n\u2502       \u2514\u2500\u2500 index.astro\n\u251c\u2500\u2500 public\/\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n<p>Comme vous pouvez le constater, la structure elle-m\u00eame est assez simple. Cependant, il y a quelques points cl\u00e9s que vous devez garder \u00e0 l&rsquo;esprit :<\/p>\n<ul>\n<li>La majeure partie de notre projet se trouve dans le dossier <strong>src<\/strong>. Vous pouvez classer vos composants, vos mises en page et vos pages dans des sous-dossiers. Vous pouvez ajouter des dossiers suppl\u00e9mentaires pour faciliter la navigation dans votre projet.<\/li>\n<li>Le dossier <strong>public<\/strong> contient tous les fichiers qui vivent en dehors du processus de construction, tels que les polices, les images ou un fichier <strong>robots.txt<\/strong>.<\/li>\n<li>Le dossier <strong>dist<\/strong> contient tout le contenu que vous souhaitez d\u00e9ployer sur votre serveur de production.<\/li>\n<\/ul>\n<p>Ensuite, nous allons nous plonger dans les principaux composants d&rsquo;Astro : les composants, les mises en page et les pages.<\/p>\n<h3>Les composants<\/h3>\n<p>Les composants sont des morceaux de code r\u00e9utilisables qui peuvent \u00eatre inclus dans l&rsquo;ensemble de votre site web, \u00e0 l&rsquo;instar des <a href=\"https:\/\/kinsta.com\/fr\/blog\/shortcodes-wordpress\/\">codes courts de WordPress<\/a>. Par d\u00e9faut, ils ont l&rsquo;extension de fichier <strong>.astro<\/strong>, mais vous pouvez \u00e9galement utiliser des composants non-Astro construits avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/generateur-site-statique-react\/#4-astro\">React<\/a>, Preact ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/generateurs-sites-statiques-svelte\/#2-astro\">Svelte<\/a>.<\/p>\n<p>Voici un exemple de ce \u00e0 quoi ressemble un composant simple &#8211; dans ce cas, une balise <code>div<\/code> class\u00e9e contenant une balise <code>h2<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;!-- src\/components\/Kinsta.astro --&gt;\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;Hello, Kinsta!&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Et voici comment nous pouvons incorporer ce composant dans notre site :<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n&lt;div&gt;\n    &lt;KinstaComponent \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Comme indiqu\u00e9 ci-dessus, vous devez d&rsquo;abord importer le composant. Ce n&rsquo;est qu&rsquo;ensuite qu&rsquo;il peut \u00eatre inclus dans la page.<\/p>\n<p>Il est maintenant temps d&rsquo;ajouter quelques propri\u00e9t\u00e9s \u00e0 notre composant. Commen\u00e7ons par la propri\u00e9t\u00e9 <code>{title}<\/code>:<\/p>\n<pre><code class=\"language-jsx\">---\nconst { title = 'Hello' } = Astro.props\n---\n\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Voici comment notre propri\u00e9t\u00e9 sera mise en \u0153uvre :<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n\n&lt;div&gt;\n    <!-- This shows \"Good day\" -->\n    &lt;KinstaComponent title=\"Good day\"\/&gt;\n\n    <!-- This shows \"Hello\" -->\n    &lt;KinstaComponent \/&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<p>C&rsquo;est simple, non ?<\/p>\n<p>Comme vous l&rsquo;avez probablement d\u00e9j\u00e0 compris, la v\u00e9ritable puissance des composants Astro r\u00e9side dans leur nature globale et r\u00e9utilisable. Ils vous permettent d&rsquo;apporter des changements radicaux \u00e0 l&rsquo;ensemble de votre site en ne modifiant que quelques lignes de code, ce qui peut vous faire gagner un nombre incalculable d&rsquo;heures que vous auriez autrement consacr\u00e9es \u00e0 des remplacements de texte fastidieux et laborieux.<\/p>\n<h3>Mises en page<\/h3>\n<p>Parlons maintenant des mises en page. Outre leur fonction th\u00e9matique famili\u00e8re, les mises en page dans Astro sont \u00e9galement des composants r\u00e9utilisables, mais elles sont utilis\u00e9es comme des enveloppes de code.<\/p>\n<p>Jetez un coup d&rsquo;\u0153il \u00e0 cet exemple :<\/p>\n<pre><code class=\"language-jsx\">---\n\/\/ src\/layouts\/Base.astro\nconst { pageTitle = 'Hello world' } = Astro.props\n---\n\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;{pageTitle}&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;main&gt;\n        &lt;slot \/&gt;\n    &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Notez la balise <code>&lt;slot \/&gt;<\/code>. L&rsquo;\u00e9l\u00e9ment <code>&lt;slot \/&gt;<\/code> d&rsquo;Astro sert de placeholder pour les balises et le contenu HTML r\u00e9els.<\/p>\n<p>Voyons ce qu&rsquo;il en est.<\/p>\n<p>Le code ci-dessous montre que notre balise <code>&lt;slot \/&gt;<\/code> est remplac\u00e9e par le code que vous souhaitez, le tout \u00e9tant envelopp\u00e9 par notre mise en page <strong>Base.astro<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base title=\"Hello world\"&gt;\n    &lt;div&gt;\n        &lt;p&gt;Some example text.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Comme vous pouvez le voir, notre balise <code>&lt;slot \/&gt;<\/code> a \u00e9t\u00e9 remplac\u00e9e par le code HTML qu&rsquo;elle repr\u00e9sente, \u00e0 savoir :<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;\n    &lt;p&gt;Some example text.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Comme vous pouvez le constater, les mises en page, tout comme les composants, vous permettent de r\u00e9utiliser des morceaux de code sur l&rsquo;ensemble de votre site, ce qui simplifie la mise \u00e0 jour de votre contenu global et de votre conception.<\/p>\n<h3>Pages<\/h3>\n<p>Les pages sont un type sp\u00e9cial de composant responsable du routage, du chargement des donn\u00e9es et de la cr\u00e9ation de mod\u00e8les.<\/p>\n<p>Astro utilise le routage par fichier pour g\u00e9n\u00e9rer les pages, plut\u00f4t que le routage dynamique. Non seulement la m\u00e9thode bas\u00e9e sur les fichiers consomme moins de bande passante, mais elle vous \u00e9vite \u00e9galement d&rsquo;avoir \u00e0 importer vos composants manuellement.<\/p>\n<p>Voici un exemple de routes d\u00e9finies :<\/p>\n<pre><code class=\"language-html\">src\/pages\/index.astro =&gt; yourdomain.com\nsrc\/pages\/test.astro =&gt; domain.com\/test\nsrc\/pages\/test\/subpage =&gt; domain.com\/test\/subpage<\/code><\/pre>\n<p>Avec ces routes, notre page d&rsquo;accueil serait rendue comme suit :<\/p>\n<pre><code class=\"language-html\">&lt;!-- src\/pages\/index.astro --&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;Hello World&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Mais nous savons d\u00e9j\u00e0 comment utiliser les mises en page, alors convertissons ceci en quelque chose de globalement accessible :<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Voil\u00e0, c&rsquo;est beaucoup plus propre.<\/p>\n<p>Nous aborderons le routage dans Astro plus en d\u00e9tail dans la suite de cet article, mais pour l&rsquo;instant, passons aux choses s\u00e9rieuses : la construction et la personnalisation de sites.<\/p>\n<h2>Personnalisation et extension d&rsquo;Astro<\/h2>\n<p>Il est temps d&rsquo;apprendre \u00e0 personnaliser votre site Astro ! Nous allons utiliser les collections Markdown, le routage, la gestion des images et une int\u00e9gration avec React pour construire et personnaliser notre site statique.<\/p>\n<h3>Collections Markdown<\/h3>\n<p>Avec la version 2.0, Astro a <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">introduit<\/a> une bien meilleure fa\u00e7on de maintenir le contenu Markdown qu&rsquo;auparavant. Gr\u00e2ce aux collections, nous pouvons \u00eatre s\u00fbrs que toutes les donn\u00e9es de notre frontmatter sont incluses et qu&rsquo;elles ont le bon type d&rsquo;association.<\/p>\n<p>Derni\u00e8rement, dans la version 2.5, Astro <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">a ajout\u00e9 la possibilit\u00e9 de g\u00e9rer \u00e9galement les fichiers JSON et YAML<\/a> en tant que collections.<\/p>\n<p>Pr\u00eat \u00e0 vous salir les mains ?<\/p>\n<p>Tout d&rsquo;abord, placez tous vos articles Markdown dans le dossier <strong>src\/content\/collection_name<\/strong>. Nous allons cr\u00e9er une collection de blogs pour ce projet, donc dans notre d\u00e9monstration, le dossier sera <strong>src\/content\/blog<\/strong>.<\/p>\n<p>Il est maintenant temps de d\u00e9finir tous les champs frontmatter n\u00e9cessaires dans notre fichier <strong>src\/content\/config.ts<\/strong>. Notre blog aura besoin des \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li><code>title<\/code> (cha\u00eene)<\/li>\n<li><code>tags<\/code> (tableau)<\/li>\n<li><code>publishDate<\/code> (heure)<\/li>\n<li><code>image<\/code> (cha\u00eene, optionnel)<\/li>\n<\/ul>\n<p>Voici \u00e0 quoi ressemble l&rsquo;ensemble :<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n    }),\n});\n\nexport const collections = {\n    'blog': blogCollection,\n};<\/code><\/pre>\n<p>Et voici ce que contient notre fichier Markdown <strong>article-about-astro.md<\/strong>:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: Article about Astro\ntags: [tag1, tag3]\npublishDate: 2023-03-01\n---\n## Tamen risit\n\nLorem *markdownum flumina*, laceraret quodcumque Pachyne, **alter** enim\ncadavera choro.<\/code><\/pre>\n<p>Il est vrai que notre fichier Markdown n&rsquo;a rien de sp\u00e9cial. Mais il y a ici une magie cach\u00e9e qui se manifestera si nous faisons une faute de frappe.<\/p>\n<p>Disons, par exemple, qu&rsquo;au lieu de saisir <code>publishDate<\/code>, nous avons accidentellement saisi <code>publishData<\/code>. Dans le cas d&rsquo;une telle faute de frappe, Astro g\u00e9n\u00e8re une erreur :<\/p>\n<pre><code class=\"language-bash\">blog \u2192 article-about-astro.md frontmatter does not match collection schema.\n  \"publishDate\" is required.<\/code><\/pre>\n<p>Incroyable, non ? Cette fonction astucieuse peut nous aider \u00e0 trouver des erreurs relatives \u00e0 la mati\u00e8re premi\u00e8re en quelques secondes.<\/p>\n<p>La derni\u00e8re chose que nous devons ajouter est une page montrant nos donn\u00e9es. Cr\u00e9ons un fichier \u00e0 <strong>src\/page\/blog\/[slug].astro<\/strong> avec le code suivant :<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title} &lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Gr\u00e2ce \u00e0 <code>getStaticPaths<\/code>, Astro cr\u00e9era toutes les pages statiques pour chaque article de la collection de blogs.<\/p>\n<p>Il ne nous manque plus qu&rsquo;une liste de tous nos articles :<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\n\nimport { getCollection } from 'astro:content';\nconst blogEntries = await getCollection('blog');\n---\n&lt;Base&gt;\n&lt;ul&gt;\n    {blogEntries.map(item =&gt; &lt;li&gt; &lt;strong&gt;&lt;a href={'\/blog\/' + item.slug}&gt;{item.data.title}&lt;\/a&gt;&lt;\/strong&gt;&lt;\/li&gt;)}\n&lt;\/ul&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Comme vous pouvez le constater, l&rsquo;utilisation de collections rend cette t\u00e2che remarquablement simple.<\/p>\n<p>Cr\u00e9ons maintenant une collection de types de donn\u00e9es. Tout d&rsquo;abord, nous devons rouvrir le fichier <strong>src\/content\/config.ts <\/strong>et ajouter une nouvelle collection de donn\u00e9es :<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection, referenece } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n\ttype: 'content',\n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n\t    author: reference('authors')\n    }),\n});\n\nconst authorsCollection = defineCollection({ \n\ttype: 'data',\n    schema: z.object({\n        fullName: z.string(),\n        country: z.string()\n    }),\n});\n\n\nexport const collections = {\n    'blog': blogCollection,\n'authors': authorsCollection,\n};<\/code><\/pre>\n<p>Outre la cr\u00e9ation d&rsquo;une nouvelle collection, nous avons \u00e9galement ajout\u00e9 la r\u00e9f\u00e9rence \u00e0 l&rsquo;<strong>auteur<\/strong> dans la <strong>collection blogCollection<\/strong>.<\/p>\n<p>Il est temps de cr\u00e9er un nouvel auteur. Nous devons cr\u00e9er un fichier appel\u00e9 <strong>maciek-palmowski.json<\/strong> dans le fichier content\/authors.json :<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>La derni\u00e8re chose qu&rsquo;il nous reste \u00e0 faire est de r\u00e9cup\u00e9rer ces donn\u00e9es dans notre publication. Pour cela, nous devons utiliser <a href=\"https:\/\/docs.astro.build\/en\/reference\/api-reference\/#getentry\" target=\"_blank\" rel=\"noopener noreferrer\">getEntry<\/a>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection, getEntry } from 'astro:content';\nexport async function getStaticPaths() {\n  const blogEntries = await getCollection('blog');\n  return blogEntries.map(entry =&gt; ({\n    params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst author = await getEntry(entry.data.author);\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n&lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n&lt;h2&gt;Author: {author.data.fullName}&lt;\/h2&gt;\n&lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<h3>Routage<\/h3>\n<p>Astro dispose de deux modes de routage diff\u00e9rents. Nous avons d\u00e9j\u00e0 appris \u00e0 conna\u00eetre le premier &#8211; le routage statique (bas\u00e9 sur les fichiers) &#8211; lorsque nous avons abord\u00e9 les pages plus t\u00f4t.<\/p>\n<p>Nous allons maintenant nous int\u00e9resser au routage dynamique.<\/p>\n<p>\u00c0 l&rsquo;aide des param\u00e8tres de routage dynamique, vous pouvez demander \u00e0 un fichier de page Astro d&rsquo;automatiser la cr\u00e9ation de plusieurs pages ayant la m\u00eame structure. C&rsquo;est utile lorsque vous avez beaucoup de pages d&rsquo;un type particulier (biographies d&rsquo;auteurs, profils d&rsquo;utilisateurs, articles de documentation, etc.)<\/p>\n<p>Dans l&rsquo;exemple suivant, nous allons g\u00e9n\u00e9rer des pages de biographies pour nos auteurs.<\/p>\n<p>Dans le mode de sortie statique par d\u00e9faut d&rsquo;Astro, ces pages sont g\u00e9n\u00e9r\u00e9es au moment de la construction, ce qui signifie que vous devez pr\u00e9d\u00e9terminer la liste des auteurs qui recevront un fichier correspondant. En mode dynamique, en revanche, les pages sont g\u00e9n\u00e9r\u00e9es sur demande pour tout itin\u00e9raire correspondant.<\/p>\n<p>Si vous voulez passer une variable comme nom de fichier, ajoutez des crochets autour d&rsquo;elle :<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Approfondissons la question en utilisant le code de notre fichier <strong>src\/page\/blog\/[slug]<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>La route <code>getStaticPaths<\/code> est responsable de la g\u00e9n\u00e9ration de toutes les pages statiques. Elle renvoie deux objets :<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> Utilis\u00e9 pour remplir les parenth\u00e8ses dans nos URL<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> Toutes les valeurs que nous transmettons \u00e0 la page<\/li>\n<\/ul>\n<p>Et avec cela, la g\u00e9n\u00e9ration de votre page est prise en charge.<\/p>\n<h3>Traitement des images<\/h3>\n<p>On ne peut parler de sites web performants sans \u00e9voquer les <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-fichier-image\/\">formats d&rsquo;image modernes<\/a>, les m\u00e9thodes de redimensionnement correctes et le chargement diff\u00e9r\u00e9.<\/p>\n<p>Heureusement, Astro nous couvre ici aussi. Gr\u00e2ce au paquetage <code>@astrojs\/image<\/code>, nous pouvons introduire tous ces \u00e9l\u00e9ments en quelques minutes.<\/p>\n<p>Apr\u00e8s avoir <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">install\u00e9 le paquet<\/a>, nous avons acc\u00e8s \u00e0 deux composants : <code>Image<\/code> et <code>Picture<\/code>.<\/p>\n<p>Le composant <code>Image<\/code> est utilis\u00e9 pour cr\u00e9er une balise <code>&lt;img \/&gt;<\/code> optimis\u00e9e. Voici un exemple :<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Image } from '@astrojs\/image\/components';\nimport heroImage from '..\/assets\/hero.png';\n---\n\n&lt;Image src={heroImage} format=\"avif\" alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} height={600} alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<p>De m\u00eame, le composant <code>Picture<\/code> permet de cr\u00e9er un composant <code>&lt;picture\/&gt;<\/code> optimis\u00e9 :<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Picture } from '@astrojs\/image\/components';\nimport hero from '..\/assets\/hero.png';\n---\n&lt;Picture src={hero} widths={[200, 400, 800]} sizes=\"(max-width: 800px) 100vw, 800px\" alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<h3>SSG vs SSR<\/h3>\n<p>Par d\u00e9faut, Astro fonctionne comme un g\u00e9n\u00e9rateur de site statique. Cela signifie que tout le contenu est converti en pages HTML statiques.<\/p>\n<p>Bien qu&rsquo;il s&rsquo;agisse d&rsquo;une approche parfaite \u00e0 bien des \u00e9gards (notamment en termes de rapidit\u00e9), nous pouvons parfois pr\u00e9f\u00e9rer une approche plus dynamique. Si vous voulez une page de profil s\u00e9par\u00e9e pour chaque utilisateur, par exemple, ou si vous avez des milliers d&rsquo;articles sur votre site, tout re-rendre \u00e0 chaque fois prendrait beaucoup trop de temps.<\/p>\n<p>Heureusement, Astro peut \u00e9galement fonctionner comme un framework enti\u00e8rement rendu c\u00f4t\u00e9 serveur ou dans un mode hybride entre les deux.<\/p>\n<p>Pour activer le SSR c\u00f4t\u00e9 serveur, nous devons ajouter le code suivant \u00e0 <strong>astro.config.mjs<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { defineConfig } from 'astro\/config';\n\nexport default defineConfig({\n    output: 'server'\n});<\/code><\/pre>\n<p>C&rsquo;est l&rsquo;approche standard.<\/p>\n<p>L&rsquo;approche hybride signifie que, par d\u00e9faut, tout est g\u00e9n\u00e9r\u00e9 dynamiquement, \u00e0 l&rsquo;exception des pages auxquelles <code>export const prerender = true<\/code> a \u00e9t\u00e9 ajout\u00e9.<\/p>\n<p>Avec Astro 2.5, il est \u00e9galement possible de <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9finir le rendu statique par d\u00e9faut et de s\u00e9lectionner manuellement les routes dynamiques<\/a>.<\/p>\n<p>Gr\u00e2ce \u00e0 cela, nous pouvons, par exemple, cr\u00e9er un site web enti\u00e8rement g\u00e9n\u00e9r\u00e9 de mani\u00e8re statique avec des pages de connexion et de profil dynamiques. Sympathique, non ?<\/p>\n<p>Vous pouvez en savoir plus \u00e0 ce sujet dans la <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation officielle<\/a>.<\/p>\n<h3>Int\u00e9gration d&rsquo;autres frameworks JavaScript<\/h3>\n<p>Une autre fonctionnalit\u00e9 \u00e9tonnante d&rsquo;Astro vous permet d&rsquo;apporter votre framework pr\u00e9f\u00e9r\u00e9 et de l&rsquo;utiliser de concert avec Astro. Vous pouvez m\u00e9langer Astro avec React, Preact, Svelte, Vue, Solid, ou Alpine (pour toutes les int\u00e9grations, voir la <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation \u00ab Add Integrations \u00bb d&rsquo;Astro<\/a>).<\/p>\n<p>Disons que nous voulons utiliser React. Tout d&rsquo;abord, nous devons installer l&rsquo;int\u00e9gration en ex\u00e9cutant ce qui suit dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a>:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Maintenant que React a \u00e9t\u00e9 int\u00e9gr\u00e9, nous pouvons cr\u00e9er un composant React. Dans notre cas, il s&rsquo;agira du composant counter dans <strong>src\/components\/ReactCounter.tsx<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\n\/** A counter written with React *\/\nexport function Counter({ children }) {\n    const [count, setCount] = useState(0);\n    const add = () =&gt; setCount((i) =&gt; i + 1);\n    const subtract = () =&gt; setCount((i) =&gt; i - 1);\n\n    return (\n        &lt;&gt;\n            &lt;div className=\"counter\"&gt;\n                &lt;button onClick={subtract}&gt;-&lt;\/button&gt;\n                &lt;pre&gt;{count}&lt;\/pre&gt;\n                &lt;button onClick={add}&gt;+&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;div className=\"counter-message\"&gt;{children}&lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Enfin, nous devons placer le compteur sur notre page avec le code suivant :<\/p>\n<pre><code class=\"language-jsx\">---\nimport * as react from '..\/components\/ReactCounter';\n---\n&lt;main&gt;\n    &lt;react.Counter client:visible \/&gt;\n&lt;\/main&gt;<\/code><\/pre>\n<p>Et voil\u00e0 : votre composant React a \u00e9t\u00e9 int\u00e9gr\u00e9 de mani\u00e8re transparente dans votre site.<\/p>\n<h2>Comment d\u00e9ployer Astro avec Kinsta<\/h2>\n<p>Il est maintenant temps d&rsquo;obtenir notre site Astro sur le web. Heureusement, Kinsta est l&rsquo;h\u00e9bergeur parfait pour un <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">h\u00e9bergement de site statique<\/a> rapide et sans douleur.<\/p>\n<p>Commencez par cr\u00e9er un d\u00e9p\u00f4t GitHub pour les fichiers de votre site. Si vous n&rsquo;\u00eates pas pr\u00eat \u00e0 utiliser vos propres fichiers, vous pouvez cloner le <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\" target=\"_blank\" rel=\"noopener noreferrer\">mod\u00e8le de site Astro<\/a> que notre \u00e9quipe a cr\u00e9\u00e9.<\/p>\n<p>Une fois que votre d\u00e9p\u00f4t est pr\u00eat, suivez les \u00e9tapes ci-dessous pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Connectez-vous ou cr\u00e9ez un compte pour voir votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez effectuer le d\u00e9ploiement.<\/li>\n<li>Attribuez un nom unique \u00e0 votre site.<\/li>\n<li>Ajoutez les r\u00e9glages de construction dans le format suivant :\n<ul>\n<li><strong>Commande de construction :<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Version de Node :<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>R\u00e9pertoire de publication :<\/strong> <code>dist<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Et c&rsquo;est tout ! Vous avez maintenant un site statique en production, enti\u00e8rement fonctionnel, cr\u00e9\u00e9 avec le framework Astro.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-starter-homepage.png\" alt=\"Notre page d'accueil Astro\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">Notre page d&rsquo;accueil Astro<\/figcaption><\/figure>\n<p>Vous trouverez votre URL de production et d&rsquo;autres d\u00e9tails de d\u00e9ploiement dans l&rsquo;onglet <strong>D\u00e9ploiements<\/strong>.<\/p>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement de site statique, vous pouvez opter pour le d\u00e9ploiement de votre site statique avec l&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a> de Kinsta, qui fournit une plus grande flexibilit\u00e9 d&rsquo;h\u00e9bergement, un plus large \u00e9ventail d&rsquo;avantages et l&rsquo;acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. Par exemple, l&rsquo;\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l&rsquo;aide d&rsquo;un fichier Docker, et des <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">statistiques compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>La structure claire d&rsquo;Astro, sa syntaxe simple et ses composants globaux rendent la construction et l&rsquo;ex\u00e9cution d&rsquo;une application vraiment facile. sa l\u00e9g\u00e8ret\u00e9 et sa double utilisation du routage statique et dynamique augmentent consid\u00e9rablement la r\u00e9activit\u00e9 du site, tandis que sa capacit\u00e9 \u00e0 coop\u00e9rer avec d&rsquo;autres frameworks JavaScript le rend d&rsquo;autant plus attrayant pour les codeurs exp\u00e9riment\u00e9s.<\/p>\n<p>Si votre objectif est de cr\u00e9er un site riche en contenu qui se charge rapidement, qui offre des fonctionnalit\u00e9s modulaires et qui permet une g\u00e9n\u00e9ration \u00e0 la fois statique et dynamique, Astro pourrait \u00eatre le bon choix pour vous.<\/p>\n<p>Vous pouvez h\u00e9berger gratuitement votre site web statique avec l&rsquo;<a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">h\u00e9bergement de sites statiques de Kinsta<\/a>.<\/p>\n<p><em>Que pensez-vous du g\u00e9n\u00e9rateur de sites statiques Astro ? L&rsquo;avez-vous utilis\u00e9 dans le cadre d&rsquo;un projet personnel ? Faites-nous en part dans la section des commentaires ci-dessous.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le d\u00e9veloppement web a parcouru un long chemin depuis les premiers jours des sites web personnels statiques d&rsquo;une seule page. Aujourd&rsquo;hui, nous disposons d&rsquo;une pl\u00e9thore de &#8230;<\/p>\n","protected":false},"author":283,"featured_media":70248,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[973,979,1011,1020],"class_list":["post-70247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-frameworks-javascript","topic-generateurs-sites-statiques","topic-outils-developpement-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Qu&#039;est-ce qu&#039;Astro ? Introduction au populaire g\u00e9n\u00e9rateur de sites statiques - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s&#039;utilisent rapidement et facilement.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu&#039;est-ce qu&#039;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques\" \/>\n<meta property=\"og:description\" content=\"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s&#039;utilisent rapidement et facilement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T07:38:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T11:47:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s&#039;utilisent rapidement et facilement.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Qu&rsquo;est-ce qu&rsquo;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques\",\"datePublished\":\"2023-06-22T07:38:24+00:00\",\"dateModified\":\"2023-10-25T11:47:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\"},\"wordCount\":2877,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\",\"name\":\"Qu'est-ce qu'Astro ? Introduction au populaire g\u00e9n\u00e9rateur de sites statiques - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-06-22T07:38:24+00:00\",\"dateModified\":\"2023-10-25T11:47:52+00:00\",\"description\":\"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s'utilisent rapidement et facilement.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Qu&rsquo;est-ce qu&rsquo;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Qu'est-ce qu'Astro ? Introduction au populaire g\u00e9n\u00e9rateur de sites statiques - Kinsta\u00ae","description":"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s'utilisent rapidement et facilement.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/","og_locale":"fr_FR","og_type":"article","og_title":"Qu'est-ce qu'Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques","og_description":"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s'utilisent rapidement et facilement.","og_url":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-06-22T07:38:24+00:00","article_modified_time":"2023-10-25T11:47:52+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s'utilisent rapidement et facilement.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Maciek Palmowski","Dur\u00e9e de lecture estim\u00e9e":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Qu&rsquo;est-ce qu&rsquo;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques","datePublished":"2023-06-22T07:38:24+00:00","dateModified":"2023-10-25T11:47:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/"},"wordCount":2877,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/","name":"Qu'est-ce qu'Astro ? Introduction au populaire g\u00e9n\u00e9rateur de sites statiques - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-06-22T07:38:24+00:00","dateModified":"2023-10-25T11:47:52+00:00","description":"Apprenez tout sur Astro, le populaire g\u00e9n\u00e9rateur de sites statiques qui vous permet de cr\u00e9er des sites web riches en contenu qui s'utilisent rapidement et facilement.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Qu&rsquo;est-ce qu&rsquo;Astro ? Une introduction au populaire g\u00e9n\u00e9rateur de sites statiques"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=70247"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70247\/revisions"}],"predecessor-version":[{"id":73939,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70247\/revisions\/73939"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70247\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/70248"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=70247"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=70247"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=70247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}