プリコネクト

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 を複数回呼び出しても、1回呼び出した場合と同じ効果が得られます。
• ブラウザでは、コンポーネントのレンダリング中、Effect内、イベントハンドラ内など、あらゆる状況で preconnect を呼び出すことができます。
• サーバーサイドレンダリングまたはサーバーコンポーネントのレンダリングでは、コンポーネントのレンダリング中またはコンポーネントのレンダリングから発生した非同期コンテキストで preconnect を呼び出した場合にのみ効果があります。その他の呼び出しは無視されます。
• 必要なリソースが具体的にわかっている場合は、代わりに他の関数を呼び出すことで、リソースの読み込みをすぐに開始できます。
• ウェブページ自体がホストされているのと同じサーバーにプリコネクトしても利点はありません。ヒントが与えられるまでに既に接続されているためです。

使用方法 （SVGアイコン）

レンダリング時のプリコネクト （SVGアイコン）

子コンポーネントがそのホストから外部リソースを読み込むことがわかっている場合は、コンポーネントのレンダリング時に preconnect を呼び出します。

import { preconnect } from 'react-dom';

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

イベントハンドラでのプリコネクト （SVGアイコン）

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

import { preconnect } from 'react-dom';

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