원문: https://react.dev/reference/react-dom/preconnect

preconnect

preconnect는 앞으로 리소스를 불러올 것으로 예상되는 서버에 미리 연결할 수 있게 해줍니다.

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

레퍼런스
- preconnect(href)
사용법
- 렌더링 시 미리 연결하기
- 이벤트 핸들러에서 미리 연결하기

레퍼런스

`preconnect(href)`

호스트에 미리 연결하려면 react-dom에서 preconnect 함수를 호출하세요.

import { preconnect } from 'react-dom';

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

preconnect 함수는 브라우저에 해당 서버로의 연결을 미리 열어두라는 힌트를 제공합니다. 브라우저가 이를 수행하면, 해당 서버에서 리소스를 불러올 때 더 빠르게 로드할 수 있습니다.

파라미터

href: 문자열. 미리 연결할 서버의 URL입니다.

반환값

preconnect는 아무것도 반환하지 않습니다.

주의사항

동일한 서버에 대해 여러 번 호출해도 한 번 호출한 것과 동일한 효과입니다.
브라우저 환경에서는 컴포넌트 렌더링 중, Effect, 이벤트 핸들러 등 언제든 호출할 수 있습니다.
서버 사이드 렌더링 또는 Server Components에서, 컴포넌트 렌더링 중이거나 렌더링에서 파생된 비동기 컨텍스트에서 호출해야만 효과가 있습니다. 그 외의 호출은 무시됩니다.
필요한 리소스를 이미 알고 있다면, 해당 리소스를 바로 로드하는 다른 함수를 사용하는 것이 더 효과적입니다.
현재 웹페이지가 호스팅된 서버에 미리 연결하는 것은 의미가 없습니다. 이미 연결되어 있기 때문입니다.

사용법

렌더링 시 미리 연결하기

컴포넌트의 자식이 외부 리소스를 해당 호스트에서 불러올 것이 확실하다면, 컴포넌트 렌더링 시 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>
  );
}