preconnect¶

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

1

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

Описание¶

preconnect(href)¶

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

1
2
3
4
5
6

import { preconnect } from 'react-dom';

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

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

Параметры

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

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

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

Ограничения

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

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

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

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

1
2
3
4
5
6

import { preconnect } from 'react-dom';

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

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

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

1
2
3
4
5
6
7
8
9

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

Комментарии