<Suspense>

<Suspense fallback={<Loading />}>  
	<SomeComponent />
</Suspense>

참조

<Suspense>

Props

• children: 렌더링하려는 실제 UI입니다. 렌더링하는 동안 children이 일시 중단되면 Suspense 경계가 fallback 렌더링으로 전환됩니다.

• fallback: 로딩이 완료되지 않은 경우에 실제 UI 대신 렌더링할 대체 UI입니다.
• 유효한 어떤 React 노드
• 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰
 
children이 일시 중단 → 자동으로 fallback으로 전환 → 다시 children으로 전환(데이터가 준비되었다)
 
렌더링 중에 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화됩니다.
 

주의사항

• React는 처음 마운트하기 전에 일시 중단된 렌더링의 state를 보존하지 않습니다. 컴포넌트가 로드되면 React는 일시 중단된 트리의 렌더링을 처음부터 다시 시도합니다.

• Suspense가 트리에 대한 콘텐츠를 표시하고 있다가 다시 일시 중단된 경우, 그 업데이트의 원인이 startTransition이나 useDeferredValue로 인한 것이 아니라면 fallback이 다시 표시됩니다.

• React가 다시 일시 중단되어 이미 표시된 콘텐츠를 숨겨야 하는 경우, 콘텐츠 트리에서 layout Effect를 클린업 합니다. 콘텐츠가 다시 표시될 준비가 되면 React는 layout Effect를 다시 실행합니다. 이를 통해 콘텐츠가 숨겨져 있는 동안에는 DOM 레이아웃을 측정하는 Effect가 해당 작업을 시도하지 않도록 합니다.
layouteffect → 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다.

• React에는 Suspense와 통합된 스트리밍 서버 렌더링 (streaming server rendering)및 선택적 Hydration과 같은 내부 최적화가 포함되어 있습니다. 아키텍처 개요 및 기술 강연에서 자세히 알아보세요.

사용법

1. 콘텐츠를 로딩하는 동안 fallback 표시하기

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

1. 앨범 목록을 가져오는 동안 Albums 컴포넌트가 일시 중단됩니다.

2. 렌더링할 준비가 될 때까지 React는 가장 가까운 상위 Suspense boundary를 fallback인 Loading 컴포넌트로 전환하여 표시합니다.

3. 이후 데이터가 로드되면 React는 Loading fallback을 숨기고 데이터와 함께 Albums 컴포넌트를 렌더링합니다.

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;

📝Note

• Suspense 도입 프레임워크를 사용한 데이터 fetching

• lazy를 사용한 지연 로딩 컴포넌트 코드

2. 콘텐츠를 한 번에 드러내기

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

<Suspense fallback={<Loading />}>
  <Details artistId={artist.id} />
</Suspense>

function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}

function Details({ artistId }) {
  return (
    <>
      <Biography artistId={artistId} />
      <Panel>
        <Albums artistId={artistId} />
      </Panel>
    </>
  );
}

3. 중첩된 콘텐츠가 로드될 때 표시하기

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>

1. Biography가 아직 로드되지 않은 경우 전체 콘텐츠 영역 대신 BigSpinner가 표시됩니다.

2. Biography로드가 완료되면 BigSpinner가 콘텐츠로 대체됩니다.

3. Albums가 아직 로드되지 않은 경우 Albums 및 그 부모 Panel 대신 AlbumsGlimmer가 표시됩니다.

4. 마지막으로 Albums 로딩이 완료되면 Albums가 AlbumsGlimmer를 대체합니다.

3. 새 콘텐츠가 로드되는 동안 오래된 콘텐츠 표시하기

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

<div style={{
  opacity: query !== deferredQuery ? 0.5 : 1 
}}>
  <SearchResults query={deferredQuery} />
</div>

📝Note

4. 이미 표시된 콘텐츠가 숨겨지지 않도록 방지하기

function Router() {
  const [page, setPage] = useState('/');

  function navigate(url) {
    startTransition(() => {
      setPage(url);      
    });
  }
  // ...

📝Note

5. 트랜지션이 발생하고 있음을 나타내기

6. 탐색시 Suspense 경계 재설정하기

<ProfilePage key={queryParams.id} />

7. 서버 오류 및 서버 전용 콘텐츠에 대한 fallback 제공하기

<Suspense fallback={<Loading />}>
  <Chat />
</Suspense>

function Chat() {
  if (typeof window === 'undefined') {
    throw Error('Chat should only render on the client.');
  }
  // ...
}

문제 해결

업데이트 중에 UI가 폴백으로 대체되는 것을 방지하려면 어떻게 해야 할까요?

function handleNextPageClick() {
  // If this update suspends, don't hide the already displayed content
  // 이 업데이트가 일시 중단되어도 이미 표시된 콘텐츠를 숨기지 않습니다
  startTransition(() => {
    setCurrentPage(currentPage + 1);
  });
}