Pourquoi Astro ?

Astro est le framework web pour la construction de sites web axés sur le contenu tels que les blogs, le marketing et le commerce électronique. Astro est surtout connu pour être le pionnier d’une nouvelle architecture frontend afin de réduire la surcharge et la complexité de JavaScript par rapport aux autres frameworks. Si vous avez besoin d’un site web qui se charge rapidement et qui a un excellent référencement, Astro est fait pour vous.

Fonctionnalités

Astro est un framework web tout-en-un. Il comprend tout ce dont vous avez besoin pour créer un site web, de manière intégrée. Des centaines d’intégrations et de hook d’API sont également disponibles pour personnaliser un projet en fonction de vos besoins et de votre cas d’utilisation.

En voici quelques exemples :

Islands : Une architecture web basée sur des composants optimisée pour les sites web axés sur le contenu.
UI-agnostic : Prend en charge React, Preact, Svelte, Vue, Solid, Lit, HTMX, les composants web, et bien plus encore.
Server-first : Déplace le rendu coûteux sur les appareils de vos visiteurs.
Zéro JS, par défaut : Moins de JavaScript côté client pour ralentir votre site.
Collections de contenu : Organisez, validez et fournissez la sécurité de type TypeScript pour votre contenu Markdown.
Personnalisable : Tailwind, MDX, et des centaines d’intégrations à choisir.

Principes de conception

Voici cinq principes de conception fondamentaux qui expliquent pourquoi nous avons construit Astro, les problèmes auxquels il vise à résoudre et pourquoi Astro peut être le meilleur choix pour votre projet ou votre équipe.

Astro c’est…

Axé sur le contenu : Astro a été conçu pour les sites Web riches en contenu.
Server-first : Les sites Web s’exécutent plus rapidement lorsqu’ils rendent le HTML sur le serveur.
Rapide par défaut : Il devrait être impossible de construire un site Web lent dans Astro.
Facile à utiliser : Vous n’avez pas besoin d’être un expert pour construire quelque chose avec Astro.
Axé pour les développeurs : Vous devez disposer des ressources nécessaires pour réussir.

Axé sur le contenu

Astro a été conçu pour créer des sites Web riches en contenu, notamment la plupart des sites de marketing, des sites de publication, des sites de documentation, des blogs, des portfolios et certains sites de e-commerce.

En revanche, la plupart des frameworks web modernes sont conçus pour construire des applications web. Ces frameworks fonctionnent mieux pour construire des expériences plus complexes, semblables à des applications dans le navigateur : tableaux de bord d’administration avec connexion, boîtes de réception, réseaux sociaux, listes de tâches, et même des applications natives comme Figma et Ping.

C’est l’une des différences les plus importantes à comprendre concernant Astro. L’unique focalisation mise par Astro sur le contenu lui permet de faire des compromis et d’offrir des performances inégalées qui n’auraient pas de sens pour des frameworks web plus orientés applications.

Server-first

Astro privilégie autant que possible le rendu côté serveur par rapport au rendu côté client. Il s’agit de la même approche que les frameworks traditionnels côté serveur -- PHP, WordPress, Laravel, Ruby on Rails, etc. -- utilisent depuis des décennies. Mais vous n’avez pas besoin d’apprendre un deuxième langage côté serveur pour le débloquer. Avec Astro, tout se résume toujours à HTML, CSS et JavaScript (ou TypeScript, si vous préférez).

Cette approche s’oppose à d’autres frameworks web JavaScript modernes tels que Next.js, SvelteKit, Nuxt, Remix, etc. Ces frameworks nécessitent un rendu côté client de l’ensemble de votre site Web et incluent un rendu côté serveur principalement pour répondre aux problèmes de performances. Cette approche a été baptisée Single Page App (SPA), par opposition à l’approche Multi Page App (MPA) d’Astro.

Le modèle SPA a ses avantages. Cependant, ils sont obtenus au prix d’une complexité supplémentaire et de compromis en termes de performances. Ces compromis nuisent aux performances de la page - y compris à des mesures critiques comme le Time to Interactive (TTI) - ce qui n’a pas beaucoup de sens pour les sites Web axés sur le contenu, pour lesquels la performance du premier chargement est essentielle.

L’approche “server-first” d’Astro vous permet d’opter pour un rendu côté client uniquement si, et exactement si, c’est nécessaire. Vous pouvez choisir d’ajouter des composants d’interface utilisateur qui s’exécutent sur le client. Vous pouvez tirer parti du routeur de transitions de vues d’Astro pour un contrôle plus fin des transitions et des animations de pages sélectionnées. Le rendu au niveau du serveur d’Astro, soit pré-rendu, soit à la demande, fournit des valeurs par défaut performantes que vous pouvez améliorer et étendre.

Rapide par défaut

De bonnes performances sont toujours importantes, mais elles sont spécialement critiques pour les sites Web axés sur le contenu. Il a été prouvé qu’une mauvaise performance vous fait perdre de l’engagement, des conversions et de l’argent. Par exemple :

Chaque 100ms plus rapide → 1% de conversions en plus (Mobify, gagnant +$380,000/an)
50% plus rapide → 12% de ventes en plus (AutoAnything)
20 % plus rapide → 10 % de conversions en plus (Furniture Village)
40% plus rapide → 15% d’inscriptions en plus (Pinterest)
850ms plus rapide → 7% de conversions en plus (COOK)
Chaque seconde de ralentissement → 10 % d’utilisateurs en moins (BBC)

Dans de nombreux frameworks web, il est facile de créer un site web qui semble parfait pendant le développement, mais dont le chargement est terriblement lent une fois déployé. JavaScript est souvent le coupable, car les téléphones des utilisateurs et les appareils moins puissants atteignent rarement la vitesse de l’ordinateur portable d’un développeur.

La magie d’Astro réside dans la façon dont il combine les deux valeurs expliquées ci-dessus - l’accent mis sur le contenu et une architecture MPA orientée serveur - pour faire des compromis et offrir des fonctionnalités que d’autres frameworks ne peuvent pas offrir. Le résultat est une performance web étonnante pour tous les sites web, dès la sortie de la boîte. Notre objectif : Il devrait être presque impossible de construire un site web lent avec Astro.

Un site Web Astro peut se charger 40 % plus vite avec 90 % de JavaScript en moins que le même site construit avec le framework Web React le plus populaire. Mais ne nous croyez pas sur parole : regardez les performances d’Astro qui laissent, Ryan Carniato (créateur de Solid.js et Marko), sans voix.

Facile à utiliser

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 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é) . 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

Nous croyons fermement qu’Astro n’est un projet réussi que si les gens aiment l’utiliser. Astro contient tout ce dont vous avez besoin pour vous aider à construire avec Astro.

Astro investit dans des outils de développement tels qu’une excellente expérience CLI dès l’ouverture de votre terminal, une extension VS Code officielle pour la coloration syntaxique, TypeScript et Intellisense, ainsi qu’une documentation activement maintenue par des centaines de contributeurs de la communauté et disponible en 14 langues.

Notre communauté accueillante, respectueuse et inclusive sur Discord est prête à apporter son soutien, sa motivation et ses encouragements. Ouvrez un fil de discussion #support pour obtenir de l’aide sur votre projet. Visitez notre canal dédié #showcase pour partager vos sites Astro, vos articles de blog, vos vidéos et même vos travaux en cours pour obtenir des commentaires sûrs et des critiques constructives. Participez à des événements réguliers en direct tels que notre appel hebdomadaire à la communauté, “Talking and Doc’ing”, et les “API/bug bashes”.

En tant que projet open-source, nous accueillons des contributions de tous types et de toutes tailles de la part des membres de la communauté, quel que soit leur niveau d’expérience. Vous êtes invités à participer aux discussions sur la feuille de route pour façonner l’avenir d’Astro, et nous espérons que vous contribuerez aux corrections et aux fonctionnalités de la base de code, du compilateur, de la documentation, des outils linguistiques, des sites Web et d’autres projets.

Créer une issue GitHub

Send us feedback