React 19 리소스 프리로딩 — preload·preinit·preconnect 어디서 호출하나

preload·preinit·preconnect는 react가 아니라 react-dom 에서 가져와 컴포넌트 렌더 중에 직접 호출한다. 보통 사이드이펙트는 렌더 중에 부르면 안 되지만, 이 API들은 예외다.

import { preload, preinit, preconnect, prefetchDNS } from "react-dom";

1. 네 API가 처리하는 범위

네 API는 리소스를 가져오는 단계 중 어디까지 처리하는가로 나뉜다.

API	동작	쓰는 곳
`prefetchDNS(href)`	DNS 조회만 미리	나중에 쓸 도메인 (확신 낮음)
`preconnect(href)`	연결까지 (DNS+TCP+TLS)	곧 요청할 도메인 (API·CDN)
`preload(href, {as})`	자원 다운로드	곧 쓸 폰트·이미지·스타일·스크립트
`preinit(href, {as})`	다운로드 + 실행/적용	즉시 실행할 스크립트, 바로 적용할 스타일시트

preload는 "받아만 두기", preinit은 "받아서 바로 실행/적용"이 차이다.

preload("https://.../font.woff2", { as: "font" });             // 받기만
preinit("https://.../analytics.js", { as: "script" });          // 받자마자 실행
preinit("https://.../theme.css", { as: "style", precedence: "high" }); // 받아서 적용

2. 가장 흔한 곳 — 렌더 중에 호출

이 힌트 API들은 멱등(idempotent) 하게 설계됐다. 같은 인자로 여러 번 불러도 React가 중복 제거(dedupe) 해 한 번만 처리한다. 그래서 렌더 중에 그냥 호출하면 된다.

import { preload, preconnect } from "react-dom";

function ProfilePage() {
  preconnect("https://api.example.com");
  preload("https://cdn.example.com/avatar-font.woff2", { as: "font" });

  return <div>...</div>;
}

→ useEffect로 감쌀 필요 없다. 오히려 렌더 중에 부르는 게 더 빠르다 — 일찍 호출할수록 프리로딩 효과가 크기 때문이다. React가 알아서 <head>에 힌트를 삽입한다.

3. 이벤트 핸들러에서 — 사용자 의도가 보일 때

다음에 필요할 게 거의 확실한 순간(hover·focus)에 미리 받는다.

function ProductLink({ id }) {
  return (
    <a
      href={`/product/${id}`}
      onMouseEnter={() => {
        preload(`/api/product/${id}`, { as: "fetch" });
      }}
    >
      제품 보기
    </a>
  );
}

4. Server Component에서도 호출 가능

데이터를 fetch하면서 그 데이터가 참조할 자원을 미리 연결/로드해 둘 수 있다.

async function Page() {
  preconnect("https://images.example.com"); // 이미지 CDN 미리 연결
  const data = await getData();
  return <Gallery images={data.images} />;
}

5. 주의할 점

react가 아니라 react-dom 에서 import (가장 흔한 실수)
RSC/SSR 지원 프레임워크(Next.js 등)에서 효과가 크다. 순수 CSR에서도 동작은 하지만 제한적
같은 인자 반복 호출은 안전 → 조건 없이 렌더마다 불러도 됨
preload/preinit은 as로 자원 종류를 알려줘야 우선순위·CORS가 맞는다

6. 정리

preload·preinit·preconnect는 react-dom에서 import해 컴포넌트 렌더 중에 직접 호출한다 (멱등이라 useEffect 불필요). 일찍 부를수록 좋아 렌더 시점이 기본이고, hover 같은 이벤트 핸들러나 Server Component에서도 호출할 수 있다. 처리 범위는 prefetchDNS(DNS) ⊂ preconnect(연결) ⊂ preload(다운로드) ⊂ preinit(실행)으로 누적된다.

이 API들은 브라우저의 <link rel="preload">·preconnect를 React로 끌어온 것이다. 그 원리는 async·defer·preload·prefetch 글에서, React 19 전반은 React 19 변경점 글에서 다룬다.