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

Astro c’est…

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 : Plus de 100+ intégrations Astro au choix.

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.

Astuce

Si votre projet se situe dans le deuxième camp des “applications”, Astro n’est peut-être pas le bon choix… et ce n’est pas grave ! Consultez Next.js pour une alternative à Astro plus axée sur les 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.

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.

Entièrement fonctionnel, mais flexible

Astro est un framework web tout-en-un qui contient tout ce dont vous avez besoin pour construire un site web. Astro inclut une syntaxe de composants, un routage basé sur les fichiers, une gestion des actifs, un processus de construction, un regroupement, des optimisations, la récupération de données, et bien plus encore. Vous pouvez créer d’excellents 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, 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 agnostique en matière d’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 supportés par Astro. Vous pouvez même mélanger différents frameworks sur la même page, ce qui facilite les migrations futures et empêche l’enfermement du projet dans un seul framework.