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: строка. 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>
  );
}