Skip to content

Commit b050353

Browse files
ArmandPhilippotArmandPhilippot
authored
Merge branch 'main' into i18n/fr-update-configuration-reference
2 parents 0fab870 + 85c4da1 commit b050353

3 files changed

Lines changed: 257 additions & 0 deletions

File tree

‎src/content/docs/es/recipes/call-endpoints.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: Llamar a los endpoints desde el servidor
3+
description: Aprende a realizar llamadas a endpoints desde el servidor en Astro.
4+
i18nReady: true
5+
type: recipe
6+
---
7+
8+
import { Steps } from '@astrojs/starlight/components';
9+
10+
Los endpoints se pueden usar para servir muchos tipos de datos. En esta receta se llama a un endpoint del servidor desde el script de un componente de la página para mostrar un saludo, sin necesidad de realizar una solicitud de recuperación adicional.
11+
12+
## Prerequisitos
13+
14+
- Un proyecto con [SSR](/es/guides/on-demand-rendering/) (output: 'server') habilitado.
15+
16+
## Receta
17+
18+
<Steps>
19+
1. Crea un endpoint en un nuevo archivo `src/pages/api/hello.ts` que devuelva algunos datos:
20+
21+
```ts title="src/pages/api/hello.ts"
22+
import type { APIRoute } from 'astro'
23+
24+
export const GET: APIRoute = () => {
25+
return new Response(
26+
JSON.stringify({
27+
greeting: 'Hola',
28+
}),
29+
)
30+
}
31+
```
32+
33+
2. En cualquier página Astro, importa el método `GET()` desde el endpoint. Llámalo con la [variable global `Astro`](/es/reference/api-reference/) para proporcionar el contexto de la solicitud, y usa la respuesta en la página:
34+
35+
```astro title="src/pages/index.astro"
36+
---
37+
import { GET } from './api/hello.ts';
38+
39+
let response = await GET(Astro)
40+
const data = await response.json()
41+
---
42+
43+
<h1>{data.greeting} mundo!</h1>
44+
```
45+
</Steps>

‎src/content/docs/es/recipes/customizing-output-filenames.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Personalizar los nombres de los archivos en el resultado de la compilación
3+
description: Aprende a cambiar el patrón de nomenclatura predeterminado para tus recursos compilados, como JavaScript, CSS e imágenes en Astro mediante las opciones de Rollup de Vite.
4+
i18nReady: true
5+
type: recipe
6+
---
7+
8+
import { Steps } from '@astrojs/starlight/components';
9+
import { FileTree } from '@astrojs/starlight/components';
10+
import ReadMore from '~/components/ReadMore.astro';
11+
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
12+
13+
Por defecto, el comando `astro build` genera los recursos compilados a partir de [el código fuente de tu proyecto](/es/basics/project-structure/#src), como los archivos JavaScript y CSS ubicados en el directorio `src/`, y los guarda en un directorio `_astro` con nombres de archivo con hash (p. ej., `_astro/index.DRf8L97S.js`), lo cual resulta ideal para el almacenamiento en caché a largo plazo.
14+
15+
Aunque normalmente no es necesario, puedes personalizar los nombres de los archivos de salida cuando sea preciso. Por ejemplo, esto puede resultar útil si tienes scripts con nombres que podrían activar los bloqueadores de anuncios (p. ej., `ads.js`), o si deseas organizar tus recursos siguiendo una convención de nomenclatura concreta. Al personalizar las opciones de salida de Rollup, puedes obtener un mayor control sobre la estructura de compilación de tu proyecto, lo que te permite cumplir con requisitos específicos de organización o implementación.
16+
17+
## Receta
18+
19+
Esta receta configura `vite.environments.client.build.rollupOptions` para generar recursos compilados con la siguiente estructura y patrón de nomenclatura:
20+
- Archivos de JavaScript (p. ej., scripts directamente asociados a tus páginas o diseños): `dist/js/[name]-[hash].js`
21+
- Fragmentos de código JavaScript divididos (p. ej., componentes importados dinámicamente o módulos compartidos): `dist/js/chunks/[name]-[hash].js`
22+
- Otros recursos (p. ej., CSS, imágenes, fuentes): `dist/static/[name]-[hash][extensión]` (p. ej., `dist/static/styles-a1b2c3d4.css`, `dist/static/logo-e5f6g7h8.svg`)
23+
24+
<Steps>
25+
26+
1. Agregar opciones de salida de Vite Rollup.
27+
28+
Modifica tu archivo `astro.config.mjs` para incluir la siguiente configuración de `vite.environments.client.build.rollupOptions.output`. Aquí es donde puedes definir los patrones de nomenclatura personalizados para tus recursos usando los [`entryFileNames`](https://rollupjs.org/configuration-options/# output-entryfilenames), [`chunkFileNames`](https://rollupjs.org/configuration-options/#output-chunkfilenames) y [`assetFileNames`](https://rollupjs.org/configuration-options/#output-assetfilenames) de Rollup:
29+
30+
```javascript title="astro.config.mjs" ins
31+
import { defineConfig } from 'astro/config';
32+
33+
export default defineConfig({
34+
// ...
35+
vite: {
36+
environments: {
37+
client: {
38+
build: {
39+
rollupOptions: {
40+
output: {
41+
// nombres de ruta relativos a `outDir`
42+
entryFileNames: 'js/[name]-[hash].js',
43+
chunkFileNames: 'js/chunks/[name]-[hash].js',
44+
assetFileNames: 'static/[name]-[hash][extname]',
45+
},
46+
},
47+
},
48+
},
49+
},
50+
},
51+
});
52+
```
53+
54+
En este ejemplo se usan los siguientes elementos provisionales de nombre de archivo:
55+
* `[name]`: El nombre original del archivo (sin la extensión ni la ruta).
56+
* `[hash]`: Un hash basado en el contenido generado para el archivo, fundamental para evitar el almacenamiento en caché. También puedes especificar una longitud, p. ej., `[hash:8]`. Esto garantiza que, al actualizar un recurso, cambie el nombre del archivo, lo que obliga a los navegadores a descargar la nueva versión en lugar de mostrar una versión obsoleta almacenada en caché.
57+
* `[extname]`: La extensión original del archivo, incluido el punto inicial (p. ej., `.js`, `.css`, `.svg`).
58+
59+
<ReadMore>
60+
Para consultar la lista completa de provisionales y patrones avanzados disponibles para estas opciones, consulta la [documentación sobre la configuración de Rollup](https://rollupjs.org/configuration-options/).
61+
</ReadMore>
62+
63+
2. Compila tu proyecto.
64+
65+
Dado que estas personalizaciones de los nombres de archivo solo se aplican al resultado de la compilación de producción, tendrás que ejecutar el comando de compilación de tu proyecto:
66+
67+
<PackageManagerTabs>
68+
<Fragment slot="npm">
69+
```shell
70+
npm run build
71+
```
72+
</Fragment>
73+
<Fragment slot="pnpm">
74+
```shell
75+
pnpm build
76+
```
77+
</Fragment>
78+
<Fragment slot="yarn">
79+
```shell
80+
yarn build
81+
```
82+
</Fragment>
83+
</PackageManagerTabs>
84+
85+
3. Una vez finalizada la compilación, comprueba tu [directorio de salida](/es/reference/configuration-reference/#outdir) (`dist/` por defecto).
86+
87+
Comprueba que los recursos de compilación del directorio `src` de tu proyecto estén nombrados y organizados según los nuevos patrones. (Los archivos del [directorio `public/`](/es/basics/project-structure/#public) se copian directamente al directorio de salida y no se ven afectados por estas opciones de nomenclatura de Rollup.)
88+
89+
En función del contenido específico de tu proyecto, tu carpeta de compilación tendrá ahora un aspecto similar al siguiente:
90+
91+
<FileTree>
92+
- dist/
93+
- js/
94+
- index-a1b2c3d4.js
95+
- chunks/
96+
- common-e5f6g7h8.js
97+
- img/
98+
- logo-i9j0k1l2.png
99+
- fonts/
100+
- myfont-q2w3e4r5.woff2
101+
- static_assets/
102+
- styles-m3n4o5p6.css
103+
- index.html
104+
- about/
105+
- index.html
106+
- ... (otros archivos HTML y recursos públicos)
107+
</FileTree>
108+
109+
</Steps>

‎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)