prefetchDNS

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

• リファレンス
  • prefetchDNS(href)
• 使用方法
  • レンダリング時のDNSプリフェッチ
  • イベントハンドラでのDNSプリフェッチ

リファレンス

prefetchDNS(href)

ホストを検索するには、react-domからprefetchDNS関数を呼び出します。

import { prefetchDNS } from 'react-dom';

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

以下の例をご覧ください。

prefetchDNS関数は、ブラウザに特定のサーバーのIPアドレスを検索するようヒントを提供します。ブラウザがこれを行うことを選択した場合、そのサーバーからのリソースの読み込みを高速化できます。

パラメータ

• href: 文字列。接続先のサーバーのURL。

戻り値

prefetchDNSは何 も返しません。

注意事項

• 同じサーバーに対してprefetchDNSを複数回呼び出しても、1回呼び出した場合と同じ効果があります。
• ブラウザでは、コンポーネントのレンダリング中、Effect内、イベントハンドラ内など、あらゆる状況でprefetchDNSを呼び出すことができます。
• サーバーサイドレンダリングまたはサーバーコンポーネントのレンダリング時には、コンポーネントのレンダリング中またはコンポーネントのレンダリングから発生した非同期コンテキストでprefetchDNSを呼び出した場合にのみ効果があります。その他の呼び出しは無視されます。
• 必要なリソースが具体的にわかっている場合は、代わりに他の関数を呼び出して、リソースの読み込みをすぐに開始することができます。
• ウェブページ自体がホストされているサーバーと同じサーバーをプリフェッチしても、ヒントが提供されるまでに既に検索されているため、メリットはありません。
• preconnectと比較して、prefetchDNSは、多数のドメインに投機的に接続する場合に適しています。その場合、プリコネクションのオーバーヘッドがメリットを上回る可能性があります。

使用方法

レンダリング時の DNS プリフェッチ

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

import { prefetchDNS } from 'react-dom';

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

イベントハンドラでの DNS プリフェッチ

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

import { prefetchDNS } from 'react-dom';

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