Utilisation de la diffusion en continu pour améliorer les performances des pages

Le SSR d’Astro utilise le streaming HTML pour envoyer chaque composant au navigateur lorsqu’il est disponible, afin d’accélérer le chargement de la page. Pour améliorer encore les performances de votre page, vous pouvez construire vos composants de manière stratégique afin d’optimiser leur chargement en évitant de bloquer la récupération des données.

L’exemple de refactorisation suivant montre comment améliorer les performances d’une page en déplaçant les appels de données vers d’autres composants, et en les retirant d’un composant où ils bloquent le rendu de la page.

La page suivante “attend” des données dans son frontmatter. Astro attendra que tous les appels fetch soient résolus avant d’envoyer du HTML au navigateur.

---
const personResponse = await fetch('https://randomuser.me/api/');
const personData = await personResponse.json();
const randomPerson = personData.results[0];
const factResponse = await fetch('https://catfact.ninja/fact');
const factData = await factResponse.json();
---
<html>
  <head>
    <title>Un nom et un fait</title>
  </head>
  <body>
    <h2>Un nom</h2>
    <p>{randomPerson.name.first}</p>
    <h2>Un fait</h2>
    <p>{factData.fact}</p>
  </body>
</html>

En déplaçant les appels await dans des composants plus petits, vous pouvez tirer profit du streaming d’Astro. En utilisant les composants suivants pour effectuer les recherches de données, Astro peut rendre d’abord certains éléments HTML, tels que le titre, puis les paragraphes lorsque les données sont prêtes.

---
const personResponse = await fetch('https://randomuser.me/api/');
const personData = await personResponse.json();
const randomPerson = personData.results[0];
---
<p>{randomPerson.name.first}</p>

---
const factResponse = await fetch('https://catfact.ninja/fact');
const factData = await factResponse.json();
---
<p>{factData.fact}</p>

La page Astro ci-dessous utilisant ces composants peut rendre des parties de la page plus rapidement. Les balises <head>, <body> et <h2> ne sont plus bloquées par les recherches de données. Le serveur récupère alors les données pour RandomName et RandomFact en parallèle et transmet le code HTML résultant au navigateur.

---
import RandomName from '../components/RandomName.astro';
import RandomFact from '../components/RandomFact.astro';
---
<html>
  <head>
    <title>Un nom et un fait</title>
  </head>
  <body>
    <h2>Un Nom</h2>
    <RandomName />
    <h2>Un Fait</h2>
    <RandomFact />
  </body>
</html>

Inclure des promesses directement

Vous pouvez également inclure des promesses directement dans le modèle. Au lieu de bloquer l’ensemble du composant, il résoudra la promesse en parallèle et ne bloquera que le balisage qui vient après.

---
const personPromise = fetch('https://randomuser.me/api/')
  .then(response => response.json())
  .then(personData => personData.results[0].name.first);
const factPromise = fetch('https://catfact.ninja/fact')
  .then(response => response.json())
  .then(factData => factData.fact);
---
<html>
  <head>
    <title>Un Nom et un Fait</title>
  </head>
  <body>
    <h2>Un Nom</h2>
    <p>{personPromise}</p>
    <h2>Un Fait</h2>
    <p>{factPromise}</p>
  </body>
</html>

Dans cet exemple, un nom sera affiché pendant que personPromise et factPromisesont en cours de chargement. Une fois que personPromise aura été résolue, Un fait apparaîtra et factPromise sera affiché lorsque son chargement sera terminé.