preconnect¶

Canary

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

preconnect позволяет вам заранее подключаться к серверу, с которого вы ожидаете загрузки ресурсов.

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

Описание¶

`preconnect(href)`¶

Чтобы предварительно подключиться к хосту, вызовите функцию preconnect из react-dom.

import { preconnect } from 'react-dom';

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

Функция preconnect дает браузеру подсказку, что ему следует открыть соединение с данным сервером. Если браузер решит это сделать, это может ускорить загрузку ресурсов с данного сервера.

Параметры

href: строка. URL-адрес сервера, к которому вы хотите подключиться.

Возвращаемое значение

preconnect ничего не возвращает.

Ограничения

Несколько вызовов preconnect с одним и тем же сервером имеют тот же эффект, что и один вызов.
В браузере вы можете вызвать preconnect в любой ситуации: при рендеринге компонента, в эффекте, в обработчике события и так далее.
При рендеринге на стороне сервера или при рендеринге серверных компонентов preconnect имеет эффект, только если вы вызываете его во время рендеринга компонента или в асинхронном контексте, возникающем при рендеринге компонента. Любые другие вызовы будут проигнорированы.
Если вы знаете, какие именно ресурсы вам понадобятся, вы можете вызвать вместо этого другие функции, которые сразу же начнут загрузку ресурсов.
Нет никакой пользы от предварительного подключения к тому же серверу, на котором размещена сама веб-страница, поскольку к моменту получения подсказки он уже будет подключен.

Использование¶

Предварительное подключение при рендеринге¶

Вызовите preconnect при рендеринге компонента, если вы знаете, что его дочерние компоненты будут загружать внешние ресурсы с этого хоста.

import { preconnect } from 'react-dom';

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

Предварительное подключение в обработчике события¶

Вызовите preconnect в обработчике события перед переходом на страницу или состояние, где потребуются внешние ресурсы. Это позволит запустить процесс раньше, чем если бы вы вызвали его во время рендеринга новой страницы или состояния.

import { preconnect } from 'react-dom';

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

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