무엇
preloadModule은 ESM 모듈을 백그라운드에서 미리 내려받아 두라고 브라우저에 힌트를 주는 API다. 실제로 필요해지는 시점의 지연을 줄인다.
href는 내려받을 모듈의 URL, options는 옵션 객체다. as: 'script'는 필수다.
import { preloadModule } from 'react-dom'
preloadModule('https://example.com/module.js', { as: 'script' })
무슨 일이 일어나나
내려받기만 하고 실행은 하지 않는다. 나중에 실제로 그 모듈을 import하는 시점에 이미 받아 둔 파일을 바로 쓸 수 있다.
클라이언트에서는 렌더링 중, Effect 안, 이벤트 핸들러 안 어디서 불러도 된다. 서버 렌더링·서버 컴포넌트에서는 렌더링 중이거나 렌더링에서 비롯된 비동기 컨텍스트에서 불렀을 때만 효과가 있고, 그 외 호출은 무시된다. 같은 href로 여러 번 부르면 한 번 부른 것과 같다.
사용법
options 객체에는 네 필드가 있다.
as—'script'고정, 필수crossOrigin—'anonymous'또는'use-credentials'integrity— Subresource Integrity 해시nonce— CSP nonce
function AppRoot() {
preloadModule('https://example.com/module.js', { as: 'script' })
return <div>...</div>
}
당장 실행까지 해야 한다면 preinitModule을 쓴다. Next.js 같은 프레임워크는 이런 처리를 번들러 수준에서 알아서 하는 경우가 많다.
실무 예시
곧 열릴 페이지나 모달에서 쓸 무거운 ESM 모듈을, 사용자가 그 화면에 들어가기 전 유휴 시점(호버, 네비게이션 직전)에 미리 받아 두는 식으로 쓴다.
왜 중요한가
직접 손으로 부르는 API가 아니다. 번들러·프레임워크의 리소스 프리로딩 전략 안쪽에서 쓰이는 저수준 힌트라, 존재와 preinitModule과의 차이(다운로드만 vs 다운로드+실행)만 구분해 두면 충분하다.
Reference