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 を複数回呼び出した場合の効果は、一度のみ呼び出した場合と同様です。
• ブラウザからは、コンポーネントのレンダー中、エフェクト内、イベントハンドラ内も含むどんな状況においても 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>
  );
}