ClientGate

ClientGate는 렌더링 환경에 따라 다른 컨텐츠를 보여주는 컴포넌트입니다:

• Client Side: children 컴포넌트를 렌더링
• Server Side: fallback 컴포넌트를 렌더링

CSR(Client-Side Rendering) 환경에서는 컴포넌트가 마운트되기 전부터 children이 렌더링됩니다.

일반적인 useEffect 사용하여 클라이언트 사이드 렌더링을 감지할 경우, 다음과 같은 문제가 발생할 수 있습니다:

• 초기 렌더링에서 fallback이 표시됨
• useEffect 실행 후 children으로 리렌더링되는 이중 렌더링 발생

useSyncExternalStore를 사용하여 서버와 클라이언트 간의 hydration mismatch를 방지합니다.

• https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store#usesyncexternalstore

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface ClientGateProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

function ClientGate({ fallback, children }: ClientGateProps): JSX.Element;

Usage

typescript

import { ClientGate } from '@modern-kit/react'

const Example = () => {
  return (
    <ClientGate fallback={<div>서버 환경입니다.</div>}>
      <div>클라이언트 환경입니다.</div>
    </ClientGate>
  );
};

Example

서버 환경입니다.