preconnect

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

• Справочник
  • preconnect(href)
• Примеры использования
  • Предварительное соединение во время рендера
  • Предварительное соединение в обработчике событий

Справочник

preconnect(href)

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

import { preconnect } from 'react-dom';

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

См. больше примеров ниже.

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

Параметры

• href: string — URL сервера, с которым нужно установить соединение.

Возвращает

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

Особенности

• Повторные вызовы preconnect для одного и того же сервера работают так же, как и один вызов.
• В браузере preconnect можно вызывать где угодно: при рендере компонента, в эффекте, обработчике событий и т. д.
• При серверной отрисовке или при использовании Server Components, 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>
    );
}