무엇
prefetchDNS는 특정 서버의 DNS 조회를 미리 해 두라고 브라우저에 힌트를 주는 API다. 그 서버에서 나중에 리소스를 가져올 때 걸리는 시간을 줄인다.
인자는 접속할 서버의 URL 문자열 하나다. 반환값은 없다.
import { prefetchDNS } from 'react-dom'
prefetchDNS('https://example.com')
무슨 일이 일어나나
브라우저(클라이언트)에서는 렌더링 중이든, Effect 안이든, 이벤트 핸들러 안이든 어디서 불러도 된다. 서버 렌더링이나 서버 컴포넌트에서는 렌더링 중에 부르거나 렌더링에서 비롯된 비동기 컨텍스트 안에서 불렀을 때만 효과가 있다. 그 외의 호출은 그냥 무시된다.
같은 서버를 여러 번 호출해도 한 번 부른 것과 동일하게 처리한다. 지금 페이지를 서비스하는 origin에는 이미 DNS가 풀려 있어서 prefetchDNS를 걸어도 이득이 없다.
사용법
접속할 도메인이 많고 그중 실제로 쓸 것이 뭔지 아직 불확실할 때 preconnect보다 prefetchDNS가 낫다. preconnect은 연결까지 미리 맺어 두는 만큼 비용이 더 크기 때문에, 도메인 수가 많아지면 그 비용이 이득을 넘어설 수 있다. 반대로 어떤 리소스가 필요한지 이미 안다면 preload처럼 그 리소스를 직접 가져오는 API를 쓰는 게 낫다.
function AppRoot() {
prefetchDNS('https://example.com')
return <div>...</div>
}
function CallToAction() {
const onClick = () => {
prefetchDNS('https://example.com')
startWizard()
}
return <button onClick={onClick}>시작</button>
}
실무 예시
검색 자동완성이나 외부 링크 미리보기처럼, 사용자 행동에 따라 여러 서드파티 도메인 중 하나로 이어질 수 있는 UI에서 미리 걸어 두면 실제 요청이 나갈 때 지연이 줄어든다.
왜 중요한가
브라우저 힌트 하나를 얹는 저수준 API라 직접 호출할 일은 드물다. Next.js 같은 프레임워크는 링크 프리페치 등에서 이런 처리를 알아서 한다. 리소스 로딩 API 계열이 있다는 것과 preconnect과의 쓰임 차이만 알아 두면 충분하다.
Reference