Astro accélère les sites statiques avec une hydratation partielle – The New Stack

Au cours de la dernière décennie, le désir d’augmenter l’interactivité sur le Web a conduit à de plus en plus de JavaScript côté client avec des frameworks comme Angular, Vue et React. Bien que cette tendance ait été une aubaine pour les développeurs qui cherchent à créer des applications complètes sur le Web, cela signifie que de plus en plus de JavaScript est livré côté client, ce qui peut enliser les utilisateurs avec des appareils plus anciens et moins puissants.

En réponse, une tendance récente a été d’essayer de revenir au rendu et à la livraison de contenu côté serveur. Une approche, adoptée par des outils comme Gatsby, Jekyll et Hugo, consiste à pré-construire des sites Web en HTML statique et à les charger sur des réseaux de diffusion de contenu couvrant le monde entier, ce qui permet des temps de chargement ultra-rapides mais réduit la quantité d’interactivité possible. Bien que ces sites aient commencé à introduire des fonctions à la périphérie pour ajouter plus d’interactivité, elles y sont encore limitées.

Entrez Astro

Astroun “nouveau type de constructeur de sites statiques pour le Web moderne” autoproclamé, lancé il y a près d’un an maintenant et est un outil qui cherche à résoudre ce problème avec une autre approche, a déclaré le PDG d’Astro. Fred Schott dans une interview avec The New Stack.

«C’était notre tentative de résoudre certains des problèmes que nous avons vus dans l’ensemble actuel d’outils de développement de statu quo autour de trop de gonflement JavaScript, une barre trop haute pour les personnes qui cherchent à se lancer dans le développement Web, où ils doivent presque apprendre React , ou Svelte ou n’importe quel langage JSX juste pour commencer à construire un “monde bonjour” », a déclaré Schott. “Nous voulions vraiment essayer de créer quelque chose qui ramène le développement Web à ses racines, où ce n’était pas seulement ‘Quel est le meilleur framework JavaScript ?’ c’était ‘Quelle est la meilleure façon de construire un site et de créer du HTML, du CSS et du JavaScript, tous à parts égales dans cette équation ?’

Comme beaucoup de réponses aux frameworks lourds en JavaScript, Astro essaie de remettre les blocs fondamentaux du Web au premier plan. Pour ce faire, Astro utilise Markdown qui prend également en charge les expressions JavaScript et les composants Astro. Schott a expliqué qu’Astro est un sur-ensemble de HTML, donc tout ce qui fonctionne en HTML fonctionne également dans Astro.

“Cela semble vraiment familier à tous ceux qui ont travaillé avec HTML, mais vous pouvez ensuite saupoudrer de JavaScript selon vos besoins et saupoudrer votre framework Web préféré selon vos besoins”, a déclaré Schott. “Si tout ce que vous savez, c’est HTML, vous devriez vous sentir vraiment à l’aise avec Astro, mais en même temps, vous pouvez ensuite importer des composants de votre framework préféré pour hydrater essentiellement la page selon vos besoins.”

Hydratation partielle

Il y a deux idées de base auxquelles Schott fait allusion ici qu’il dit différencie le cadre des autres : hydratation partielle et la capacité de travailler avec n’importe quel framework.

Pour de nombreux frameworks, la page se charge comme une seule unité, ce qui signifie que l’utilisateur ne peut interagir avec aucune partie de celle-ci tant que tout n’est pas chargé. Cela a également des implications sur la bande passante et le calcul, car cela signifie qu’une page pleine de carrousels d’images et d’autres fonctionnalités peut prendre du temps à se charger et à utiliser de la bande passante.

Avec Astro, les développeurs peuvent créer un site avec n’importe quel front-end qu’ils aiment — Réagir, Préagir, Svelte, vue, SolidJS, AlpineJS ou Allumépar exemple — et tout le JavaScript côté client est entièrement supprimé par défaut pendant le processus de construction. L’hydratation partielle, cependant, vous permet de créer de l’interactivité en remettant du JavaScript côté client là où c’est absolument nécessaire. Dans le même temps, l’hydratation partielle permet au développeur de déterminer quels aspects sont chargés et quand, en utilisant quelque chose qu’ils appellent une “architecture insulaire”.

« Cette idée d’architecture insulaire et d’hydratation partielle est que vous hydratez les composants de manière isolée, en parallèle séparément. L’implication est que ce bouton “acheter” pour lequel vous avez besoin de JavaScript va s’hydrater beaucoup plus rapidement de manière isolée, tandis qu’un carrousel d’images coûteux plus bas sur la page s’affiche et se charge totalement séparément », a expliqué Schott. « Vous pouvez même commencer à contrôler le chargement de choses individuelles. Donc, le bouton ‘acheter’, super important, hydrate ça instantanément, mais un carrousel d’images plus bas sur la page, on s’en fiche pas mal, on va lui donner la possibilité de s’hydrater seulement une fois qu’il devient visible . Si vous ne le faites jamais défiler, vous n’en payez jamais le coût.

Actuellement, Astro offre les avantages d’un générateur de site statique avec JavaScript “saupoudré”, mais l’outil est faire quelques pas au-delà de ça avec l’introduction de capacités de rendu côté serveur et la sortie d’une version bêta v1.0. Schott a déclaré avoir ajusté sa direction au cours de la dernière année de développement et examiné le rendu côté serveur pour les cas d’utilisation du commerce électronique. Il a pointé un carte d’interactivité qui a été partagé sur Twitter, notant qu ‘«avec notre annonce la semaine prochaine, nous atteindrons également l’étape« site de commerce électronique »du graphique, mais sinon, nous n’irons pas plus loin en termes de concentration.

Image sélectionnée via Pixabay.

— to thenewstack.io