Skip to main content

ClientGate

Client Side에서는 children을, Server Side에서는 fallback component를 보여주는 컴포넌트입니다.

Pure CSR 환경에서 렌더시에는 첫 라이프 사이클이 수행되어 mount가 완료되기 전부터 해당 component를 보여줍니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript

interface ClientGateProps {
  fallback?: JSX.Element;
}

const ClientGate: ({
  fallback = <></>
}: PropsWithChildren<ClientGateProps>) => JSX.Element;

Usage​

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

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

Example​

서버 환경입니다.