Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions src/content/reference/react-dom/preloadModule.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: preloadModule

<Note>

[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
[Los frameworks basados en React](/learn/start-a-new-react-project) con frecuencia manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tú mismo. Consulta la documentación de tu framework para más detalles.

</Note>

<Intro>

`preloadModule` lets you eagerly fetch an ESM module that you expect to use.
`preloadModule` te permite precargar de forma anticipada un módulo ESM que esperas utilizar.

```js
preloadModule("https://example.com/module.js", {as: "script"});
Expand All @@ -22,11 +22,11 @@ preloadModule("https://example.com/module.js", {as: "script"});

---

## Reference {/*reference*/}
## Referencia {/*reference*/}

### `preloadModule(href, options)` {/*preloadmodule*/}

To preload an ESM module, call the `preloadModule` function from `react-dom`.
Para precargar un módulo ESM, llama a la función `preloadModule` de `react-dom`.

```js
import { preloadModule } from 'react-dom';
Expand All @@ -38,37 +38,37 @@ function AppRoot() {

```

[See more examples below.](#usage)
[Ver más ejemplos abajo.](#usage)

The `preloadModule` function provides the browser with a hint that it should start downloading the given module, which can save time.
La función `preloadModule` proporciona al navegador una señal de que debería comenzar a descargar el módulo dado, lo cual puede ahorrar tiempo.

#### Parameters {/*parameters*/}
#### Parámetros {/*parameters*/}

* `href`: a string. The URL of the module you want to download.
* `options`: an object. It contains the following properties:
* `as`: a required string. It must be `'script'`.
* `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
* `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
* `href`: un string. La URL del módulo que deseas descargar.
* `options`: un objeto. Contiene las siguientes propiedades:
* `as`: un string requerido. Debe ser `'script'`.
* `crossOrigin`: un string. La [política de CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) a utilizar. Sus valores posibles son `anonymous` y `use-credentials`.
* `integrity`: un string. Un hash criptográfico del módulo, para [verificar su autenticidad](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `nonce`: un string. Un [nonce criptográfico para permitir el módulo](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) cuando se utiliza una Política de Seguridad de Contenido estricta.


#### Returns {/*returns*/}
#### Devuelve {/*returns*/}

`preloadModule` returns nothing.
`preloadModule` no devuelve nada.

#### Caveats {/*caveats*/}
#### Advertencias {/*caveats*/}

* Multiple calls to `preloadModule` with the same `href` have the same effect as a single call.
* In the browser, you can call `preloadModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preloadModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
* Múltiples llamadas a `preloadModule` con el mismo `href` tienen el mismo efecto que una sola llamada.
* En el navegador, puedes llamar a `preloadModule` en cualquier situación: mientras renderizas un componente, en un Efecto, en un manejador de eventos, etc.
* En el renderizado del lado del servidor o al renderizar Componentes de Servidor, `preloadModule` solo tiene efecto si lo llamas mientras renderizas un componente o en un contexto asíncrono que se origina a partir del renderizado de un componente. Cualquier otra llamada será ignorada.

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Preloading when rendering {/*preloading-when-rendering*/}
### Precarga durante el renderizado {/*preloading-when-rendering*/}

Call `preloadModule` when rendering a component if you know that it or its children will use a specific module.
Llama a `preloadModule` al renderizar un componente si sabes que el componente o sus hijos utilizarán un módulo específico.

```js
import { preloadModule } from 'react-dom';
Expand All @@ -79,11 +79,11 @@ function AppRoot() {
}
```

If you want the browser to start executing the module immediately (rather than just downloading it), use [`preinitModule`](/reference/react-dom/preinitModule) instead. If you want to load a script that isn't an ESM module, use [`preload`](/reference/react-dom/preload).
Si deseas que el navegador comience a ejecutar el módulo de inmediato (en lugar de solo descargarlo), usa [`preinitModule`](/reference/react-dom/preinitModule) en su lugar. Si deseas cargar un script que no es un módulo ESM, usa [`preload`](/reference/react-dom/preload).

### Preloading in an event handler {/*preloading-in-an-event-handler*/}
### Precarga en un manejador de eventos {/*preloading-in-an-event-handler*/}

Call `preloadModule` in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
Llama a `preloadModule` en un manejador de eventos antes de hacer la transición a una página o estado donde el módulo será necesario. Esto inicia el proceso antes que si lo llamaras durante el renderizado de la nueva página o estado.

```js
import { preloadModule } from 'react-dom';
Expand Down