`NexusRuntime`

NexusRuntime은 next-nexus의 클라이언트 사이드 기능에 필수적인 클라이언트 전용 컴포넌트입니다. 루트 레이아웃에 한 번만 배치해야 합니다.

핵심 개념 (Core Concepts)

클라이언트 캐시 초기화

이 컴포넌트는 모든 클라이언트 사이드 훅(useNexusQuery, useNexusMutation 등)에서 사용하는 인메모리 LRU 캐시를 초기화합니다. 이 캐시는 클라이언트 사이드 상태 관리와 재검증을 가능하게 합니다.

하이드레이션 수신자

NexusRuntime은 NexusHydrationBoundary에 의해 직렬화된 하이드레이션 페이로드를 수신하는 역할을 합니다. 클라이언트 사이드 애플리케이션이 마운트될 때, 이 컴포넌트는 페이로드를 적용하여 서버에서 이미 가져온 데이터로 클라이언트 캐시를 “채웁니다(hydrating)”. 이를 통해 데이터를 다시 가져올 필요 없이 서버 렌더링 콘텐츠에서 상호작용 가능한 클라이언트 애플리케이션으로 매끄럽게 전환됩니다.

RSC 요청 통합

클라이언트 사이드 네비게이션(RSC 요청) 중에 NexusRuntime은 자동으로 fetch 호출을 가로채 클라이언트의 캐시 상태에 대한 메타데이터(__NEXUS_CLIENT_CACHE__)를 포함하는 쿠키를 추가합니다. 이를 통해 서버는 다음과 같은 지능적인 결정을 내릴 수 있습니다.

클라이언트가 이미 가지고 있는 데이터에 대한 하이드레이션 건너뛰기 (ETag 기반).
변경되지 않은 캐시 항목에 대해 클라이언트가 TTL을 연장하도록 지시하기. 이 과정은 NexusRenderer를 사용한 렌더링 위임과 같은 기능의 핵심입니다.

Import


import { NexusRuntime } from 'next-nexus/client';

사용법

루트 레이아웃(app/layout.tsx)의 닫는 </body> 태그 바로 앞에 NexusRuntime을 한 번만 삽입하세요.


// app/layout.tsx
import { NexusRuntime } from 'next-nexus/client';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        {children}
        <NexusRuntime />
      </body>
    </html>
  );
}

중요: 이 컴포넌트를 중첩된 레이아웃이나 다른 컴포넌트에 추가하지 마세요. 반드시 전역적으로 한 번만 설치해야 합니다.

Props

maxSize?: number (기본값: 200) — 클라이언트 사이드 LRU 캐시의 최대 항목 수.

함께 보기