RSC Utilities | Notion

원문: https://github.com/facebook/astryx/wiki/RSC-Utilities · 번역 기준: 2026-09-03

⚠️ 상태: 미구현. 아래에 설명된 컴포넌트 — Lazy, Stream, IntersectionTrigger — 는 제안된 설계일 뿐입니다. 이들 중 어느 것도 현재 Astryx에 존재하지 않습니다. Skeleton과 Spinner만 구현되어 사용 가능합니다. 이 페이지는 향후 RSC 통합 작업을 위한 설계 의도를 기록합니다.

개요

컴포넌트	Fetch 대상	렌더링	Use case	상태
`Skeleton`	—	Shimmer placeholder	로딩 상태	✅ 구현됨
`Spinner`	—	회전 인디케이터	진행 중 상태	✅ 구현됨
`IntersectionTrigger`	—	콜백 실행	커스텀 intersection 로직	🔮 제안됨
`Lazy`	데이터 (JSON)	Client-side	Lazy cell/field 값	🔮 제안됨
`Stream`	RSC flight	Server component	무한 스크롤, pagination	🔮 제안됨

구현된 컴포넌트

Skeleton

Shimmer 애니메이션이 있는 로딩 placeholder:

<Skeleton />                    // Full width
<Skeleton width={100} />        // Fixed width
<Skeleton width="50%" />        // Percentage
<Skeleton height={20} />        // Custom height
<Skeleton shape="circle" />     // Avatar placeholder
<Skeleton animate={false} />    // No animation

Spinner

진행 중 상태를 위한 로딩 spinner:

<Spinner />
<Spinner size="small" />
<Spinner size="large" />

제안된 컴포넌트

이 아래의 모든 내용은 설계 제안입니다. API는 구현 전에 크게 바뀔 수 있습니다.

IntersectionTrigger

요소가 viewport에 들어올 때 콜백을 실행합니다. 콜백을 사용하는 client-side pagination용:

<IntersectionTrigger
  onIntersect={loadMore}
  rootMargin="200px"
  disabled={!hasMore}>
  {isLoading && <Spinner />}
</IntersectionTrigger>

Props

interface IntersectionTriggerProps {
  onIntersect: () => void; // Callback when visible
  rootMargin?: string; // Intersection margin (default: '100px')
  threshold?: number; // Visibility threshold (default: 0)
  disabled?: boolean; // Disable observation
  children?: ReactNode; // Content to render
}