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

prefetchDNS

prefetchDNS는 앞으로 리소스를 불러올 것으로 예상되는 서버의 IP를 미리 조회(DNS 프리페치)할 수 있게 해줍니다.

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

레퍼런스
- prefetchDNS(href)
사용법
- 렌더링 시 DNS 프리페치하기
- 이벤트 핸들러에서 DNS 프리페치하기

레퍼런스

`prefetchDNS(href)`

호스트의 IP를 미리 조회하려면 react-dom에서 prefetchDNS 함수를 호출하세요.

import { prefetchDNS } from 'react-dom';

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

prefetchDNS 함수는 브라우저에 해당 서버의 IP 주소를 미리 조회하라는 힌트를 제공합니다. 브라우저가 이를 수행하면, 해당 서버에서 리소스를 불러올 때 더 빠르게 로드할 수 있습니다.

파라미터

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

반환값

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

주의사항

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

사용법

렌더링 시 DNS 프리페치하기

컴포넌트의 자식이 외부 리소스를 해당 호스트에서 불러올 것이 확실하다면, 컴포넌트 렌더링 시 prefetchDNS를 호출하세요.

import { prefetchDNS } from 'react-dom';

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

이벤트 핸들러에서 DNS 프리페치하기

페이지나 상태 전환 전에 외부 리소스가 필요할 것이 예상된다면, 이벤트 핸들러에서 prefetchDNS를 호출해 미리 DNS 조회를 시작할 수 있습니다. 이렇게 하면 새 페이지나 상태가 렌더링될 때보다 더 일찍 조회가 시작됩니다.

import { prefetchDNS } from 'react-dom';

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