Pourquoi Astro ?

Astro est un framework web tout-en-un pour la création de sites web rapides centrés sur le contenu.

Pourquoi choisir Astro plutôt qu’un autre framework web ? Voici cinq principes de conception fondamentaux qui expliquent pourquoi nous avons créé Astro, les problèmes qu’il doit résoudre et pourquoi Astro peut être le meilleur choix pour votre projet ou votre équipe.

1. Axé sur le contenu : Astro a été conçu pour les sites Web riches en contenu.
2. Server-first : Les sites Web s’exécutent plus rapidement lorsqu’ils rendent le HTML sur le serveur.
3. Rapide par défaut : Il devrait être impossible de construire un site Web lent dans Astro.
4. Facile à utiliser : Vous n’avez pas besoin d’être un expert pour construire quelque chose avec Astro.
5. Entièrement fonctionnel, mais flexible : Vous pouvez choisir parmi plus de 100 intégrations Astro.

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 créer des applications web. Ces frameworks conviennent parfaitement à la création d’expériences plus complexes, semblables à des applications, dans le navigateur : tableaux de bord d’administration connectés, 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’accent unique mis par Astro sur le contenu lui permet de faire des compromis et d’offrir des fonctionnalités de performance inégalées qui n’auraient pas de sens pour des frameworks web plus axés sur les applications.

Astro privilégie autant que possible le rendu côté serveur par rapport au rendu côté client. C’est la même approche que les cadres 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 la 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, ceux-ci sont obtenus au prix d’une complexité supplémentaire et de compromis en matière 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 où les performances au premier chargement sont essentielles.

📚 En savoir plus sur ce qui rend l’architecture MPA unique architecture

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 a l’air génial pendant le développement, mais qui se charge douloureusement lentement 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 - un accent mis sur le contenu et une architecture MPA orientée serveur - pour faire des compromis et offrir des fonctionnalités que les 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 rapidement 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.

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 faire en sorte que vous puissiez utiliser tous les langages de composants d’interface utilisateur favoris 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 extrait valide de HTML 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, pour que toute cette complexité disparaisse.

L’un de nos dictons préférés est le suivant : opt-in to complexity. Nous avons conçu Astro pour éliminer autant de “complexité requise” que possible de l’expérience du développeur, en particulier lorsque vous montez à bord pour la première fois. 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 progressivement à de nouvelles fonctionnalités et API au fur et à mesure.

Astro est un framework web tout-en-un qui comprend tout ce dont vous avez besoin pour construire un site Web. Astro inclut une syntaxe de composants, un routage basé sur des fichiers, une gestion des ressources, un processus de construction, des regroupements, des optimisations, la récupération de données, etc. Vous pouvez créer de superbes sites Web sans jamais sortir du cadre des fonctionnalités de base d’Astro.

Si vous avez besoin de plus de contrôle, vous pouvez étendre Astro avec plus de 100+ intégrations comme React, Svelte, Vue, Tailwind CSS, MDX, optimisations d’images, et plus encore. Connectez votre CMS préféré ou déployez sur votre hôte préféré avec une seule commande.

Astro est un agrément de l’interface utilisateur, ce qui signifie que vous pouvez apporter votre propre framework d’interface utilisateur (BYOF). React, Preact, Solid, Svelte, Vue et Lit sont tous officiellement pris en charge par Astro. Vous pouvez même mélanger différents frameworks sur la même page, ce qui facilite les migrations futures et évite de verrouiller le projet sur un seul framework.