From f039fc7516473af6b0145e5e09794874b60157db Mon Sep 17 00:00:00 2001
From: Waxer59 <78129249+Waxer59@users.noreply.github.com>
Date: Mon, 13 Nov 2023 19:20:05 +0100
Subject: [PATCH] i18n(es): Translate streaming-improve-page-performance.mdx
(#5379)
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
.../streaming-improve-page-performance.mdx | 101 ++++++++++++++++++
1 file changed, 101 insertions(+)
create mode 100644 src/content/docs/es/recipes/streaming-improve-page-performance.mdx
diff --git a/src/content/docs/es/recipes/streaming-improve-page-performance.mdx b/src/content/docs/es/recipes/streaming-improve-page-performance.mdx
new file mode 100644
index 0000000000000..72475648e0b82
--- /dev/null
+++ b/src/content/docs/es/recipes/streaming-improve-page-performance.mdx
@@ -0,0 +1,101 @@
+---
+title: "Utilizando transmisión para mejorar el rendimiento de la página"
+description: "Aprende cómo utilizar la transmisión para mejorar el rendimiento de la página."
+type: recipe
+i18nReady: true
+---
+
+El SSR de Astro utiliza la transmisión de HTML para enviar cada componente al navegador cuando está disponible, lo que acelera la carga de la página. Para mejorar aún más el rendimiento de tu página, puedes construir estratégicamente tus componentes para optimizar su carga, evitando bloqueos durante la recuperación de datos.
+
+El siguiente ejemplo de refactorización demuestra cómo mejorar el rendimiento de la página al trasladar las llamadas de recuperación de datos a otros componentes, sacándolas de un componente donde bloquean el rendimiento de la página.
+
+La siguiente página realiza `await`s para la recuperación de algunos datos en su frontmatter. Astro esperará a que todas las llamadas `fetch` se resuelvan antes de enviar cualquier HTML al navegador.
+
+```astro title="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();
+---
+
+
+ Un nombre y un hecho
+
+
+ Un nombre
+ {randomPerson.name.first}
+ Un hecho
+ {factData.fact}
+
+
+```
+
+Al trasladar las llamadas `await` a componentes más pequeños, puedes aprovechar la transmisión de Astro. Al utilizar los siguientes componentes para realizar las recuperaciones de datos, Astro puede renderizar parte del HTML primero, como el título, y luego los párrafos cuando los datos estén listos.
+
+```astro title="src/components/RandomName.astro"
+---
+const personResponse = await fetch('https://randomuser.me/api/');
+const personData = await personResponse.json();
+const randomPerson = personData.results[0];
+---
+{randomPerson.name.first}
+```
+
+```astro title="src/components/RandomFact.astro"
+---
+const factResponse = await fetch('https://catfact.ninja/fact');
+const factData = await factResponse.json();
+---
+{factData.fact}
+```
+
+La página de Astro que se muestra a continuación, utilizando estos componentes, puede renderizar partes de la página más pronto. Las etiquetas ``, ``, y `` ya no están bloqueadas por las recuperaciones de datos. El servidor luego recuperará datos para `RandomName` y `RandomFact` en paralelo y transmitirá el HTML resultante al navegador.
+
+```astro title="src/pages/index.astro"
+---
+import RandomName from '../components/RandomName.astro'
+import RandomFact from '../components/RandomFact.astro'
+---
+
+
+ Un nombre y un hecho
+
+
+ Un nombre
+
+ Un hecho
+
+
+
+```
+
+#### Incluyendo Promesas directamente
+
+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 marcado que viene después de ella.
+
+```astro title="src/pages/index.astro"
+---
+const personPromise = fetch('https://randomuser.me/api/')
+ .then(response => response.json())
+ .then(arr => arr[0].name.first);
+const factPromise = fetch('https://catfact.ninja/fact')
+ .then(response => response.json())
+ .then(factData => factData.fact);
+---
+
+
+ Un nombre y un hecho
+
+
+ Un nombre
+
{personPromise}
+ Un hecho
+ {factPromise}
+
+
+```
+
+En este ejemplo, `Un nombre` se renderizará mientras se están cargando `personPromise` y `factPromise`.
+Una vez que `personPromise` se haya resuelto, aparecerá `Un hecho` y `factPromise` se renderizará cuando haya terminado de cargarse.
\ No newline at end of file