prefetchDNSLink for this heading

January 6, 2025 · View on GitHub

prefetchDNS lets you eagerly look up the IP of a server that you expect to load resources from.

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

Reference
- prefetchDNS(href)
Usage
- Prefetching DNS when rendering
- Prefetching DNS in an event handler

Reference Link for Reference

`prefetchDNS(href)`Link for this heading

To look up a host, call the prefetchDNS function from react-dom.

import { prefetchDNS } from 'react-dom';

function AppRoot() {

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

  // ...

}

See more examples below.

The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server.

Parameters Link for Parameters

href: a string. The URL of the server you want to connect to.

Returns Link for Returns

prefetchDNS returns nothing.

Caveats Link for Caveats

Multiple calls to prefetchDNS with the same server have the same effect as a single call.
In the browser, you can call prefetchDNS in any situation: while rendering a component, in an Effect, in an event handler, and so on.
In server-side rendering or when rendering Server Components, prefetchDNS only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
If you know the specific resources you’ll need, you can call other functions instead that will start loading the resources right away.
There is no benefit to prefetching the same server the webpage itself is hosted from because it’s already been looked up by the time the hint would be given.
Compared with preconnect, prefetchDNS may be better if you are speculatively connecting to a large number of domains, in which case the overhead of preconnections might outweigh the benefit.

Usage Link for Usage

Prefetching DNS when rendering Link for Prefetching DNS when rendering

Call prefetchDNS when rendering a component if you know that its children will load external resources from that host.

import { prefetchDNS } from 'react-dom';

function AppRoot() {

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

  return ...;

}

Prefetching DNS in an event handler Link for Prefetching DNS in an event handler

Call prefetchDNS in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { prefetchDNS } from 'react-dom';

function CallToAction() {

  const onClick = () => {

    prefetchDNS('http://example.com');

    startWizard();

  }

  return (

    <button onClick={onClick}>Start Wizard</button>

  );

}