ClientOnly

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


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

ClientOnly.with

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


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