React Server Components (Suspense Boundary)

#39RenderingHard

React Server Components (Suspense Boundary)

React Server Components

실제 RSC는 서버에서 실행되어 자바스크립트 번들을 줄이지만, 이 문제에서는 같은 비동기 데이터 페치 + Suspense 경계 계약을 클라이언트에서 모사합니다.

구현할 것

// async "Server" Component — 실제 RSC에서는 서버에서 실행됨
async function UserCardServer({ userId }: { userId: string }): Promise<JSX.Element>;

UserCardServer는 async 함수 컴포넌트입니다.
내부에서 fetchUser(userId)(목 함수, 제공됨)를 await로 호출하고 결과를 렌더링합니다.
부모는 <Suspense fallback="Loading">로 감싸 promise resolve 전까지 fallback을 보여줍니다.

사용 예시

<Suspense fallback={<p>Loading</p>}>
  <UserCardServer userId="u1" />
</Suspense>

학습 포인트

RSC의 핵심 계약: async 컴포넌트 + Suspense 경계
실제 RSC는 서버에서 직렬화되어 클라이언트로 전송되지만, 여기서는 같은 멘탈 모델을 모사
테스트는 findByText로 async resolve를 기다린다

import { use } from 'react';

// NOTE: 실제 RSC에서는 이 컴포넌트가 서버에서 실행되어
// 클라이언트로 직렬화되어 전송됩니다. 여기서는 Suspense 계약만 모사합니다.

export type User = { id: string; name: string };

// 목 fetcher — 50ms 후 resolve
export function fetchUser(userId: string): Promise<User> {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id: userId, name: `User-${userId}` }), 50);
  });
}

// 같은 userId에 대해 같은 promise를 반환 (Suspense 호환을 위해 캐시 필요)
const cache = new Map<string, Promise<User>>();
export function getUser(userId: string): Promise<User> {
  if (!cache.has(userId)) {
    cache.set(userId, fetchUser(userId));
  }
  return cache.get(userId)!;
}

export function UserCardServer({ userId }: { userId: string }) {
  // TODO: getUser(userId)로 promise를 얻고, `use()`로 unwrap 하세요
  // TODO: { id, name }을 <div>에 렌더하세요 — 예: <div>{name} ({id})</div>
  return null;
}

Open Sandbox

Sandpack 로드 중…

import { use } from 'react';

// NOTE: 실제 RSC에서는 이 컴포넌트가 서버에서 실행되어
// 클라이언트로 직렬화되어 전송됩니다. 여기서는 Suspense 계약만 모사합니다.

export type User = { id: string; name: string };

// 목 fetcher — 50ms 후 resolve
export function fetchUser(userId: string): Promise<User> {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id: userId, name: `User-${userId}` }), 50);
  });
}

// 같은 userId에 대해 같은 promise를 반환 (Suspense 호환을 위해 캐시 필요)
const cache = new Map<string, Promise<User>>();
export function getUser(userId: string): Promise<User> {
  if (!cache.has(userId)) {
    cache.set(userId, fetchUser(userId));
  }
  return cache.get(userId)!;
}

export function UserCardServer({ userId }: { userId: string }) {
  // TODO: getUser(userId)로 promise를 얻고, `use()`로 unwrap 하세요
  // TODO: { id, name }을 <div>에 렌더하세요 — 예: <div>{name} ({id})</div>
  return null;
}

Open Sandbox