[250714] TIL

Today I Learned (2025-07-14)

Suspense

• 여기서부터는 동적으로 채워질 수 있다는 경계를 만드는 용도
• suspense는 비동기적, 지연이 불가피한 부분에서만 집중적으로 사용하기

서버 suspense

• 서버 데이터 패칭이 끝날 때 까지
• 독립적으로 비동기 영역 만들고 싶을 때

클라이언트 suspense

• 비동기 데이터 패칭, 코드 스플리팅 등
• fetch보다는 주로 import로 동적 (lazy) 컴포넌트, swr , react query 같은 라이브러리에서 사용

둘 다 “준비 안 된 부분의 경계”를 만드는 건 똑같지만, 실행 환경/용도/렌더링 주체가 다름!

use

https://ko.react.dev/reference/react/use#usage

• if 문, 반복문 내부에서 호출 할 수 있다.
• use Hook은 Promise나 Context에서 참조한 값을 반환합니다.
• 서버 컴포넌트에서 데이터를 가져올때는 use 보다 async await 를 사용
  • async await 이 호출된 시점부터 렌더링을 시작하는 반면, use는 데이터가 리졸브된 후 컴포넌트를 리렌더링 함
    • 이게 무슨 소리냐, await 가 끝날 때까지 렌더링 자체가 멈춤
    • use는 데이터 패칭 끝 전에도 리렌더링
• 클라이언트 컴포넌트에서 promise 생성하는 것보다 서버 컴포넌트에서 전달하는게 좋음. 클라이언트 컴포넌트에서 생성된 promise는 렌더링떄마다 다시 생성됨
  • 서버 컴포넌트에서 만들어진 데이터는 Props 로 클라이언트에 한 번 전달 되면 그걸 받는 쪽에서 아무리 리렌더해도 값이 바뀌지 않음
  • 대신 클라이언트에서 상태가 전달 되면 아래가 서버 컴포넌트여도 리렌더링 됨
• useContext 대신 사용 가능
• 서버에서 클라이언트로 데이터 스트리밍 하기

"use client";

import { use, Suspense } from "react";

function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

export function MessageContainer({ messagePromise }) {
  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

• use는 try-catch 블록에서 호출할 수 없습니다. try-catch 블록 대신 컴포넌트를 Error Boundary로 래핑하거나, Promise의 catch 메서드를 사용하여 대체 값을 제공해야 합니다.

"use client";

import { use, Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <Suspense fallback={<p>⌛Downloading message...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  );
}

function Message({ messagePromise }) {
  const content = use(messagePromise);
  return <p>Here is the message: {content}</p>;
}