preload
preload
lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
preload("https://example.com/font.woff2", {as: "font"});
Reference
preload(href, options)
To preload a resource, call the preload
function from react-dom
.
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/font.woff2", {as: "font"});
// ...
}
The preload
function provides the browser with a hint that it should start downloading the given resource, which can save time.
Parameters
href
: a string. The URL of the resource you want to download.options
: an object. It contains the following properties:as
: a required string. The type of resource. Its possible values areaudio
,document
,embed
,fetch
,font
,image
,object
,script
,style
,track
,video
,worker
.crossOrigin
: a string. The CORS policy to use. Its possible values areanonymous
anduse-credentials
. It is required whenas
is set to"fetch"
.referrerPolicy
: a string. The Referrer header to send when fetching. Its possible values areno-referrer-when-downgrade
(the default),no-referrer
,origin
,origin-when-cross-origin
, andunsafe-url
.integrity
: a string. A cryptographic hash of the resource, to verify its authenticity.type
: a string. The MIME type of the resource.nonce
: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.fetchPriority
: a string. Suggests a relative priority for fetching the resource. The possible values areauto
(the default),high
, andlow
.imageSrcSet
: a string. For use only withas: "image"
. Specifies the source set of the image.imageSizes
: a string. For use only withas: "image"
. Specifies the sizes of the image.
Returns
preload
returns nothing.
Caveats
- Multiple equivalent calls to
preload
have the same effect as a single call. Calls topreload
are considered equivalent according to the following rules:- Two calls are equivalent if they have the same
href
, except: - If
as
is set toimage
, two calls are equivalent if they have the samehref
,imageSrcSet
, andimageSizes
.
- Two calls are equivalent if they have the same
- In the browser, you can call
preload
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,
preload
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.
Usage
Preloading when rendering
Call preload
when rendering a component if you know that it or its children will use a specific resource.
Ejemplo 1 de 4: Preloading an external script
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/script.js", {as: "script"});
return ...;
}
If you want the browser to start executing the script immediately (rather than just downloading it), use preinit
instead. If you want to load an ESM module, use preloadModule
.
Preloading in an event handler
Call preload
in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
import { preload } from 'react-dom';
function CallToAction() {
const onClick = () => {
preload("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}