Skip to content

Commit 2d536b5

Browse files
marcos-corrochanomarcos-corrochano
committed
create recipes/streaming-improve-page-performance.mdx
1 parent 366132c commit 2d536b5

1 file changed

Lines changed: 103 additions & 0 deletions

File tree

‎src/content/docs/es/recipes/streaming-improve-page-performance.mdx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Usa la transmisión en continuo para mejorar el rendimiento de las páginas
3+
description: Aprende a usar la transmisión en continuo para mejorar el rendimiento de la página.
4+
type: recipe
5+
i18nReady: true
6+
---
7+
8+
El SSR de Astro usa transmisión HTML para enviar cada componente al navegador en cuanto está disponible, lo que permite una carga más rápida de la página. Para mejorar aún más el rendimiento de tu página, puedes diseñar tus componentes de forma estratégica para optimizar su carga, evitando las recuperaciones de datos que bloquean la página.
9+
10+
El siguiente ejemplo de refactorización muestra cómo mejorar el rendimiento de la página trasladando las llamadas de recuperación a otros componentes, sacándolas así de un componente en el que bloquean la renderización de la página.
11+
12+
La siguiente página usa la instrucción `await` para cargar algunos datos en su frontmatter. Astro esperará a que se resuelvan todas las llamadas `fetch` antes de enviar cualquier código HTML al navegador.
13+
14+
```astro title="src/pages/index.astro"
15+
---
16+
const personResponse = await fetch('https://randomuser.me/api/');
17+
const personData = await personResponse.json();
18+
const randomPerson = personData.results[0];
19+
const factResponse = await fetch('https://catfact.ninja/fact');
20+
const factData = await factResponse.json();
21+
---
22+
<html>
23+
<head>
24+
<title>Un nombre y un dato</title>
25+
</head>
26+
<body>
27+
<h2>Un nombre</h2>
28+
<p>{randomPerson.name.first}</p>
29+
<h2>Un dato</h2>
30+
<p>{factData.fact}</p>
31+
</body>
32+
</html>
33+
```
34+
35+
La siguiente página usa la instrucción `await` para cargar algunos datos en su frontmatter. Astro esperará a que se resuelvan todas las llamadas `fetch` antes de enviar cualquier código HTML al navegador.
36+
37+
```astro title="src/components/RandomName.astro"
38+
---
39+
const personResponse = await fetch('https://randomuser.me/api/');
40+
const personData = await personResponse.json();
41+
const randomPerson = personData.results[0];
42+
---
43+
<p>{randomPerson.name.first}</p>
44+
```
45+
46+
```astro title="src/components/RandomFact.astro"
47+
---
48+
const factResponse = await fetch('https://catfact.ninja/fact');
49+
const factData = await factResponse.json();
50+
---
51+
<p>{factData.fact}</p>
52+
```
53+
54+
La página Astro que se muestra a continuación, al usar estos componentes, puede renderizar partes de la página más rápido.º Las etiquetas `<head>`, `<body>` y `<h2>` ya no quedan bloqueadas por las recuperaciones de datos. A continuación, el servidor recuperará los datos de `RandomName` y `RandomFact` en paralelo y enviará el código HTML resultante al navegador.
55+
56+
```astro title="src/pages/index.astro"
57+
---
58+
import RandomName from '../components/RandomName.astro';
59+
import RandomFact from '../components/RandomFact.astro';
60+
---
61+
<html>
62+
<head>
63+
<title>Un nombre y un dato</title>
64+
</head>
65+
<body>
66+
<h2>Un nombre</h2>
67+
<RandomName />
68+
<h2>Un dato</h2>
69+
<RandomFact />
70+
</body>
71+
</html>
72+
```
73+
74+
#### Incluir promesas directamente
75+
76+
También puedes incluir promesas directamente en la plantilla. En lugar de bloquear todo el componente, resolverá la promesa en paralelo y solo bloqueará el código de marcado que venga a continuación.
77+
78+
```astro title="src/pages/index.astro"
79+
---
80+
const personPromise = fetch('https://randomuser.me/api/')
81+
.then(response => response.json())
82+
.then(personData => personData.results[0].name.first);
83+
84+
const factPromise = fetch('https://catfact.ninja/fact')
85+
.then(response => response.json())
86+
.then(factData => factData.fact);
87+
---
88+
<html>
89+
<head>
90+
<title>Un nombre y un dato</title>
91+
</head>
92+
<body>
93+
<h2>Un nombre</h2>
94+
<p>{personPromise}</p>
95+
<h2>Un dato</h2>
96+
<p>{factPromise}</p>
97+
</body>
98+
</html>
99+
```
100+
101+
En este ejemplo, `Un nombre` se mostrará mientras se cargan `personPromise` y `factPromise`.
102+
103+
Una vez que `personPromise` se haya resuelto, aparecerá `Un dato` y `factPromise` se mostrará cuando haya terminado de cargarse.

0 commit comments

Comments
 (0)