preload

Note

React-based frameworks frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework’s documentation for details.

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 thepreload function fromreact-dom.

import{preload}from'react-dom';

functionAppRoot(){
preload("https://example.com/font.woff2",{as:"font"});
// ...
}

See more examples below.

Thepreload 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. Itspossible values areaudio,document,embed,fetch,font,image,object,script,style,track,video,worker.
- crossOrigin: a string. TheCORS policy to use. Its possible values areanonymous anduse-credentials. It is required whenas is set to"fetch".
- referrerPolicy: a string. TheReferrer 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, toverify its authenticity.
- type: a string. The MIME type of the resource.
- nonce: a string. A cryptographicnonce 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 thesource set of the image.
- imageSizes: a string. For use only withas: "image". Specifies thesizes of the image.

Returns

preload returns nothing.

Caveats

Multiple equivalent calls topreload 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 samehref, except:
- Ifas is set toimage, two calls are equivalent if they have the samehref,imageSrcSet, andimageSizes.
In the browser, you can callpreload 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

Callpreload when rendering a component if you know that it or its children will use a specific resource.

Examples of preloading

Example 1 of 4:
Preloading an external script

import{preload}from'react-dom';

functionAppRoot(){
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), usepreinit instead. If you want to load an ESM module, usepreloadModule.

Preloading in an event handler

Callpreload 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';

functionCallToAction(){
constonClick =()=>{
preload("https://example.com/wizardStyles.css",{as:"style"});
startWizard();
}
return(
<buttononClick={onClick}>Start Wizard</button>
);
}

PreviouspreinitModule

NextpreloadModule

Movatterモバイル変換