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/preinitModule.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: preinitModule

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

`preinitModule` lets you eagerly fetch and evaluate an ESM module.
`preinitModule` te permite precargar y evaluar de forma anticipada un módulo ESM.

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

---

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

### `preinitModule(href, options)` {/*preinitmodule*/}

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

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

```

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

The `preinitModule` function provides the browser with a hint that it should start downloading and executing the given module, which can save time. Modules that you `preinit` are executed when they finish downloading.
La función `preinitModule` proporciona al navegador una señal de que debería comenzar a descargar y ejecutar el módulo dado, lo cual puede ahorrar tiempo. Los módulos que preinicializas se ejecutan cuando terminan de descargarse.

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

* `href`: a string. The URL of the module you want to download and execute.
* `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 y ejecutar.
* `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*/}

`preinitModule` returns nothing.
`preinitModule` no devuelve nada.

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

* Multiple calls to `preinitModule` with the same `href` have the same effect as a single call.
* In the browser, you can call `preinitModule` 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, `preinitModule` 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 `preinitModule` con el mismo `href` tienen el mismo efecto que una sola llamada.
* En el navegador, puedes llamar a `preinitModule` 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, `preinitModule` 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 `preinitModule` when rendering a component if you know that it or its children will use a specific module and you're OK with the module being evaluated and thereby taking effect immediately upon being downloaded.
Llama a `preinitModule` al renderizar un componente si sabes que el componente o sus hijos utilizarán un módulo específico y estás de acuerdo con que el módulo sea evaluado y, por lo tanto, surta efecto inmediatamente después de descargarse.

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

If you want the browser to download the module but not to execute it right away, use [`preloadModule`](/reference/react-dom/preloadModule) instead. If you want to preinit a script that isn't an ESM module, use [`preinit`](/reference/react-dom/preinit).
Si deseas que el navegador descargue el módulo pero no lo ejecute de inmediato, usa [`preloadModule`](/reference/react-dom/preloadModule) en su lugar. Si deseas preinicializar un script que no es un módulo ESM, usa [`preinit`](/reference/react-dom/preinit).

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

Call `preinitModule` 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 `preinitModule` 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 { preinitModule } from 'react-dom';
Expand Down