prefetchDNS¶

Canary

Функция prefetchDNS в настоящее время доступна только в каналах React Canary и experimental. Подробнее о каналах выпуска React здесь.

Функция prefetchDNS позволяет вам с нетерпением искать IP-адрес сервера, с которого вы ожидаете загрузить ресурсы.

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

Описание¶

`prefetchDNS(href)`¶

Чтобы найти хост, вызовите функцию prefetchDNS из react-dom.

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>;
}

Источник — https://react.dev/reference/react-dom/prefetchDNS