注記

Reactベースのフレームワークは、リソースの読み込みを自動で処理することが多いため、このAPIを自分で呼び出す必要がない場合があります。詳細については、フレームワークのドキュメントを参照してください。

preloadを使用すると、スタイルシート、フォント、または使用する予定の外部スクリプトなどのリソースを事前に取得できます。

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

リファレンス

preload(href, options)

リソースをプリロードするには、react-domからpreload関数を呼び出します。

import { preload } from 'react-dom';

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

以下の例をさらに参照してください。

preload関数は、ブラウザーに指定されたリソースのダウンロードを開始するよう指示するヒントを提供し、時間を節約できます。

パラメーター

  • href: 文字列。ダウンロードするリソースのURL。
  • options: オブジェクト。次のプロパティが含まれています
    • as: 必須の文字列。リソースの種類。可能な値は、audio、document、embed、fetch、font、image、object、script、style、track、video、workerです。
    • crossOrigin: 文字列。使用するCORSポリシー。可能な値はanonymousとuse-credentialsです。asが"fetch"に設定されている場合は必須です。
    • referrerPolicy: 文字列。フェッチ時に送信するReferrerヘッダー。可能な値は、no-referrer-when-downgrade（デフォルト）、no-referrer、origin、origin-when-cross-origin、およびunsafe-urlです。
    • integrity: 文字列。リソースの暗号化ハッシュで、その真正性を検証します。
    • type: 文字列。リソースのMIMEタイプ。
    • nonce: 文字列。厳格なコンテンツセキュリティポリシーを使用する際に、リソースを許可するための暗号化nonce。
    • fetchPriority: 文字列。リソースのフェッチにおける相対的な優先度を示唆します。指定できる値は、auto（デフォルト）、high、lowです。
    • imageSrcSet: 文字列。as: "image" と共に使用する場合のみ有効です。画像のソースセットを指定します。
    • imageSizes: 文字列。as: "image" と共に使用する場合のみ有効です。画像のサイズを指定します。

戻り値

preload は何も返しません。

注意点

  • preload への複数の同等の呼び出しは、単一の呼び出しと同じ効果を持ちます。preload の呼び出しは、以下の規則に従って同等とみなされます。
    • 2つの呼び出しは、href が同じ場合、同等です。ただし、
    • as が image に設定されている場合、2つの呼び出しは、href、imageSrcSet、および imageSizes が同じ場合に同等です。
  • ブラウザでは、コンポーネントのレンダリング中、Effect 内、イベントハンドラ内など、どのような状況でも preload を呼び出すことができます。
  • サーバーサイドレンダリングやサーバーコンポーネントのレンダリング時には、preload は、コンポーネントのレンダリング中またはコンポーネントのレンダリングに起因する非同期コンテキストで呼び出した場合にのみ効果があります。他のすべての呼び出しは無視されます。

使用法

レンダリング時のプリロード

コンポーネントまたはその子要素が特定のリソースを使用することがわかっている場合は、コンポーネントのレンダリング中に preload を呼び出します。

プリロードの例

例 1の 4:
外部スクリプトのプリロード 

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/script.js", {as: "script"});
  return ...;
}

ブラウザに（ダウンロードだけでなく）すぐにスクリプトの実行を開始させたい場合は、代わりにpreinitを使用してください。ESMモジュールを読み込みたい場合は、preloadModuleを使用してください。

イベントハンドラでのプリロード

外部リソースが必要となるページまたは状態への遷移を行う前に、イベントハンドラ内で preload を呼び出します。これにより、新しいページまたは状態のレンダリング中に呼び出すよりも早くプロセスを開始できます。

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>
  );
}
前preinitModule
次へpreloadModule