preconnect

preconnect("https://example.com");

• リファレンス
  • preconnect(href)
• 使用法
  • レンダー時の事前接続
  • イベントハンドラ内での事前接続

リファレンス

preconnect(href)

ホストに事前接続を行うためには、react-dom の preconnect 関数を呼び出します。

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  // ...
}

さらに例を見る

preconnect 関数は、指定されたサーバへの接続を開くよう、ブラウザに対してヒントを与えます。ブラウザがそのヒントに従うと、そのサーバからのリソースのロードが素早く行える可能性があります。

引数

• href: 文字列。接続したいサーバの URL。

返り値

preconnect は何も返しません。

注意点

• 同じサーバに対して preconnect を複数回呼び出した場合の効果は、一度のみ呼び出した場合と同様です。
• ブラウザからは、コンポーネントのレンダー中、エフェクト内、イベントハンドラ内も含むどんな状況においても preconnect の呼び出しが可能です。
• サーバサイドレンダリングやサーバコンポーネントのレンダー時には、コンポーネントのレンダー中やレンダーから派生した非同期処理の中で preconnect を呼び出した場合にのみ効果があります。それ以外の呼び出しは無視されます。
• どのリソースが必要か具体的に分かっている場合は、リソースのロードを即座に開始する他の関数を利用することができます。
• ウェブページ自体がホストされているのと同じサーバに事前接続する利点はありません。接続のヒントが与えられた時点で既に接続が完了しているからです。

使用法

レンダー時の事前接続

コンポーネントをレンダーする際に子コンポーネントがホストから外部リソースをロードすると分かっている場合に、preconnect を呼び出しておきます。

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  return ...;
}

イベントハンドラ内での事前接続

外部リソースを必要とするページ遷移や状態遷移を行う前に、イベントハンドラで preconnect を呼び出しておきます。これにより、新しいページや状態がレンダーされる時点で読み込むのと比べ、早期に処理を開始できます。

import { preconnect } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preconnect('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}