Skip to Content
핵심 원리라이프사이클

라이프사이클

next-nexus의 데이터 흐름이 어떻게 동작하는지 한눈에 파악해 보세요.

선행 조건: definition은 팩토리로만 생성하고, 루트 레이아웃에 NexusRuntime을 설치하며, 데이터를 가져오는 세그먼트를 NexusHydrationBoundary로 감싸야 합니다(또는 페이지를 withNexusHydrationBoundary로 export). 자세한 내용은 /ko/getting-started와 /ko/api/definitions 문서를 참고하세요.

한눈에 보기

  1. 팩토리 함수로 엔드포인트 definition을 작성합니다. 캐시 키는 이 definition을 기반으로 생성됩니다.
  2. 서버(RSC)에서 nexus(...)를 호출하여 데이터를 가져오고, 응답 헤더와 페이로드를 수집합니다.
  3. 하이드레이션: NexusHydrationBoundary가 수집된 데이터를 직렬화하여 클라이언트로 전달합니다.
  4. 클라이언트가 마운트될 때 NexusRuntime이 이 데이터를 복원하여 캐시를 채웁니다.
  5. 데이터 읽기: 서버에서는 nexus(...)를, 클라이언트에서는 useNexusQuery를 사용합니다.
  6. 데이터 쓰기: useNexusMutation, useNexusAction, useNexusFormAction을 사용하고, tags 기반 재검증으로 데이터를 동기화합니다.
  7. cache, revalidate, tags 옵션은 Next.js의 캐싱 규칙과 동일하게 동작합니다.
  8. 모든 오류는 NexusError 객체로 표준화되므로, isNexusError 타입 가드를 사용해 안정적으로 처리할 수 있습니다.
  9. 개발 모드에서 디버깅 로그를 활성화하여 요청 및 캐시 이벤트를 쉽게 확인할 수 있습니다.

데이터 흐름도

Route/navigation
   ↓
Server RSC render ──▶ nexus(def, opts) ──▶ collect {data, etag, headers}
   ↓                                     \
Hydration payload ◀─────────────────────── restore on client
   ↓
Client render ──▶ useNexusQuery(...) ──▶ cache read/write, revalidate/tag
   ↓
Mutations/Actions ──▶ revalidate tags ──▶ re-fetch where subscribed

실행 위치

  • 서버: 요청 헤더를 읽고, RSC에서 nexus(...)를 실행하며, 하이드레이션할 데이터를 수집합니다.
  • 클라이언트: 하이드레이션 데이터를 복원하고, 훅을 실행하며, 필요 시 캐시된 응답 헤더에 접근합니다.

다음 단계

Last updated on
시작하기데이터 읽기