ClientOnly

이 컴포넌트는 클라이언트 환경에서만 children을 렌더링하며, 서버에서는 fallback을 렌더링합니다. 필요에 따라 적절한 fallback을 설정하여 사용자 경험을 향상할 수 있습니다.

ClientOnly는 실행 환경을 감지하기 위해 내부적으로 useIsClient 훅을 사용하여 구현되었습니다.


import { ClientOnly } from '@suspensive/react'
 
const Example = () => (
  <ClientOnly fallback={<>로딩 중...</>}>
    <div>클라이언트 환경에서만 렌더링 됩니다.</div>
  </ClientOnly>
)

import { ClientOnly } from '@suspensive/react'

export const Example = () => (
  <div style={{ padding: 20 }}>
    <h3>ClientOnly Example</h3>
    <ClientOnly
      fallback={
        <div style={{ color: 'gray' }}>
          Server fallback — waiting for client...
        </div>
      }
    >
      <div style={{ color: 'green' }}>
        This is rendered on the client only!
        <br />
        Window width: {window.innerWidth}px
      </div>
    </ClientOnly>
  </div>
)

Open Sandbox

ClientOnly.with

ClientOnly.with는 ClientOnly를 사용하여 컴포넌트를 래핑하는 HOC입니다. ClientOnly.with를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.


import { ClientOnly } from '@suspensive/react'
 
const Example = ClientOnly.with({ fallback: <>server</> }, () => {
  return <>client</>
})