Saltar al contenido

Usar streaming para mejorar el rendimiento de la página

El SSR de Astro usa HTML streaming para enviar cada componente al navegador cuando está disponible para una carga de página más rápida. Para mejorar aún más el rendimiento de tu página, puedes construir tus componentes estratégicamente para optimizar su carga evitando llamadas de datos bloqueantes.

El siguiente ejemplo de refactorización demuestra cómo mejorar el rendimiento de la página moviendo llamadas fetch a otros componentes, sacándolas de un componente donde bloquean el renderizado de la página.

La siguiente página hace await de algunos datos en su frontmatter. Astro esperará a que todas las llamadas de fetch se resuelvan antes de enviar cualquier HTML al navegador.

src/pages/index.astro
---
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>A name and a fact</title>
  </head>
  <body>
    <h2>A name</h2>
    <p>{randomPerson.name.first}</p>
    <h2>A fact</h2>
    <p>{factData.fact}</p>
  </body>
</html>

Mover las llamadas await a componentes más pequeños te permite aprovechar el streaming de Astro. Usando los siguientes componentes para realizar las llamadas de datos, Astro puede renderizar algo de HTML primero, como el título, y luego los párrafos cuando los datos estén listos.

src/components/RandomName.astro
---
const personResponse = await fetch('https://randomuser.me/api/');
const personData = await personResponse.json();
const randomPerson = personData.results[0];
---
<p>{randomPerson.name.first}</p>
src/components/RandomFact.astro
---
const factResponse = await fetch('https://catfact.ninja/fact');
const factData = await factResponse.json();
---
<p>{factData.fact}</p>

La página de Astro siguiente que usa estos componentes puede renderizar partes de la página más rápido. Las etiquetas <head>, <body>, y <h2> ya no están bloqueadas por las llamadas de datos. El servidor luego obtendrá los datos para RandomName y RandomFact en paralelo y hará stream del HTML resultante al navegador.

src/pages/index.astro
---
import RandomName from '../components/RandomName.astro';
import RandomFact from '../components/RandomFact.astro';
---
<html>
  <head>
    <title>A name and a fact</title>
  </head>
  <body>
    <h2>A name</h2>
    <RandomName />
    <h2>A fact</h2>
    <RandomFact />
  </body>
</html>

Incluir Promises directamente

Sección titulada “Incluir Promises directamente”

También puedes incluir promises directamente en la plantilla. En lugar de bloquear todo el componente, resolverá la promise en paralelo y solo bloqueará el markup que viene después de ella.

src/pages/index.astro
---
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>A name and a fact</title>
  </head>
  <body>
    <h2>A name</h2>
    <p>{personPromise}</p>
    <h2>A fact</h2>
    <p>{factPromise}</p>
  </body>
</html>

En este ejemplo, A name se renderizará mientras personPromise y factPromise se están cargando. Una vez que personPromise se haya resuelto, A fact aparecerá y factPromise se renderizará cuando termine de cargar.

Contribuir Comunidad Patrocinar