prefetchDNS
소개
prefetchDNS를 사용하면 리소스를 로드할 것으로 예상되는 서버의 IP를 미리 조회할 수 있어요.
prefetchDNS("https://example.com");레퍼런스
prefetchDNS(href)
호스트를 조회하려면, react-dom에서 prefetchDNS 함수를 호출하세요.
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
// ...
}prefetchDNS 함수는 브라우저에게 특정 서버의 IP 주소를 조회해야 한다는 힌트를 제공해요. 브라우저가 이를 수행하기로 선택하면, 해당 서버로부터 리소스를 로드하는 속도를 높일 수 있어요.
💡 부연 설명: DNS(Domain Name System)는
example.com같은 도메인 이름을 실제 서버의 IP 주소(예:192.0.2.1)로 변환하는 시스템이에요.prefetchDNS는 이 변환 작업을 미리 해두라고 브라우저에게 알려주는 거죠. 나중에 그 서버에서 실제로 리소스를 가져올 때, DNS 조회 시간을 절약할 수 있어서 로딩이 더 빨라져요!
매개변수(Parameters)
href: 문자열이에요. 연결하려는 서버의 URL이에요.
반환값(Returns)
prefetchDNS는 아무것도 반환하지 않아요.
주의사항(Caveats)
- 같은 서버에 대해 여러 번
prefetchDNS를 호출하는 것은 한 번 호출하는 것과 같은 효과를 가져요. - 브라우저에서는 어떤 상황에서든
prefetchDNS를 호출할 수 있어요: 컴포넌트를 렌더링하는 동안, Effect 안에서, 이벤트 핸들러 안에서 등등. - 서버 사이드 렌더링이나 Server Components를 렌더링할 때,
prefetchDNS는 컴포넌트를 렌더링하는 동안 호출하거나 컴포넌트 렌더링에서 시작된 비동기 컨텍스트에서 호출할 때만 효과가 있어요. 그 외의 모든 호출은 무시돼요. - 필요한 특정 리소스를 알고 있다면, 대신 리소스를 즉시 로드하기 시작하는 다른 함수들을 호출할 수 있어요.
- 웹페이지 자체가 호스팅되는 동일한 서버를 프리페치하는 것은 이점이 없어요. 힌트가 주어질 시점에는 이미 조회되었을 테니까요.
preconnect와 비교했을 때, 많은 수의 도메인에 투기적으로 연결하는 경우prefetchDNS가 더 나을 수 있어요. 이런 경우 사전 연결의 오버헤드가 이점을 초과할 수 있거든요.
💡 부연 설명:
prefetchDNS는 DNS만 조회해요 (도메인 → IP 변환만)preconnect는 DNS 조회 + TCP 연결 + TLS 핸드셰이크까지 다 해요만약 확실히 그 서버에서 리소스를 가져올 거라면
preconnect가 좋지만, 여러 서버 중 어디서 가져올지 불확실하다면prefetchDNS가 더 가벼워서 좋아요. 예를 들어, 사용자가 여러 CDN 중 하나를 선택할 수 있는 상황이라면, 모든 CDN에 대해prefetchDNS를 해두되preconnect는 하지 않는 게 효율적이에요.
사용법
렌더링 중에 DNS 프리페치하기
컴포넌트의 자식들이 해당 호스트로부터 외부 리소스를 로드할 것을 알고 있다면, 컴포넌트를 렌더링할 때 prefetchDNS를 호출하세요.
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
return ...;
}💡 부연 설명: 예를 들어, 앱이 로드되자마자
https://cdn.example.com에서 이미지나 폰트를 가져올 거라는 걸 알고 있다면, 앱 루트 컴포넌트에서prefetchDNS("https://cdn.example.com")를 호출해두면 좋아요. 그러면 브라우저가 백그라운드에서 미리 DNS 조회를 시작해서, 나중에 실제로 그 리소스를 요청할 때 더 빠르게 가져올 수 있어요!
이벤트 핸들러에서 DNS 프리페치하기
외부 리소스가 필요한 페이지나 상태로 전환하기 전에 이벤트 핸들러에서 prefetchDNS를 호출하세요. 이렇게 하면 새 페이지나 상태를 렌더링하는 동안 호출하는 것보다 프로세스를 더 일찍 시작할 수 있어요.
import { prefetchDNS } from 'react-dom';
function CallToAction() {
const onClick = () => {
prefetchDNS('http://example.com');
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}💡 부연 설명: 사용자가 버튼을 클릭해서 마법사(wizard) 화면으로 이동할 거라는 걸 알고 있다면, 버튼 클릭 핸들러에서 미리
prefetchDNS를 호출해두는 게 좋아요. 사용자가 버튼을 클릭하는 순간 DNS 조회가 시작되고, 마법사 화면이 실제로 렌더링되고 리소스를 요청할 때쯤이면 DNS 조회가 이미 완료되어 있을 가능성이 높아져요!이런 식으로 "사용자의 다음 행동을 예측"해서 미리 준비해두는 게 성능 최적화의 핵심이에요. 단, 너무 많은 도메인에 대해 프리페치하면 오히려 리소스 낭비가 될 수 있으니 실제로 사용할 가능성이 높은 것들만 선택적으로 프리페치하는 게 중요해요!
