⚛️ <Suspense> 활용

이전 글: 2024.06.15 - [👩🏻‍💻 dev] - ⚛️ <Suspense>란? 에서는 리액트 공식문서의 Suspense props에 대해 알아봤다.

 

⚛️ <Suspense>란?

이번 글에서는 이전 글에서 간단하게 소개만 한 Suspense가 쓰이는 경우에 대해 예시와 함께 살펴보자.

Suspense 활용
1. 컨텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때
2. 한꺼번에 콘텐츠를 노출하고 싶을 때
3. 로딩되고 있는 동안 중첩(nested)된 콘텐츠를 노출하고 싶을 때
4. 새 (fresh) 콘텐츠를 로딩하고 있는 동안 직전(stale) 콘텐츠를 보여줄 때
5. 이미 노출된 콘텐츠를 숨기는 걸 방지하고 싶을 때
6. Transition이 일어나고 있다는 걸 알리고 싶을 때
7. navigation이 발생할 때 Suspense boundary들을 리셋하고 싶을 때
8. 서버 에러 발생 시와 클라이언트에만 해당하는 콘텐츠를 보여줄 fallback을 제공하고 싶을 때

---

쓰임 1: 컨텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때

애플리케이션 어디든 지 원하는 곳에 Suspense boundary를 감싸줄 수 있다.

children에서 쓰일 데이터와 코드가 모두 로드되기 전까지 loading fallback을 대신 보여주기 위해서 쓰일 수 있다.

 

Album 컴포넌트가 로딩되기 전까지 Loading 컴포넌트를 fallback으로 보여주는 다음 예를 살펴보자.

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

 

<Album/> 컴포넌트는 앨범 리스트를 fetch 해오는 동안 suspend 한다.

렌더 될 준비가 되기 전까지 리액트는 가장 가까운 상위의 Suspense boundary를 찾아서 fallback인 <Loading/>을 보여준다..

 

Suspend의 뜻에 대입해 보면 '일시적으로 어떤 동작(<Album/> 컴포넌트가 렌더 되는 것)이 발생하거나 일어나는 것을 멈추는 것'이다.

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

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

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

export default function App() {
  const [show, setShow] = useState(false);
  if (show) {
    return (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  } else {
    return (
      <button onClick={() => setShow(true)}>
        Open The Beatles artist page
      </button>
    );
  }
}

 

동작은 다음과 같다.

쓰임 1: 컨텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때

⚠️ 주의할 점

• Suspense-enabled 데이터 소스만 Suspense 컴포넌트를 작동시킨다.
  • Suspense-enabled 데이터 소스에는:
    • 데이터 fetch와 Suspense-enabled 프레임워크를 지원하는 Relay나 Next.js와 같은 프레임워크
    • lazy로 구현한 Lazy-loading 컴포넌트
    • use (canary, 아직은 실험적인 요소)로 Promise값을 읽을 때
  • Suspense는 Effect나 이벤트 핸들러 내의 데이터가 fetch 되는 것을 감지하지 못한다.
• Albums 컴포넌트 내의 데이터를 로드하는 정확한 방식은 프레임워크에 따라 다를 수 있다.
• Suspense-enabled 프레임워크를 사용한다면 데이터 fetch 문서에서 해당 내용을 찾을 수 있다. 
• 프레임워크에 종속적(opinionated)이지 않은 Suspense-enabled data fetching은 아직 지원하지는 않는다.
• 따라서 아직 불안정하고 문서가 없다고 한다. 앞으로의 리액트 버전들에서 공식적 API를 Suspense를 기다릴 수밖에

---

쓰임 2: 콘텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때

기본적으로 Suspense 안의 트리는 하나의 묶음으로 취급된다.

Biography 컴포넌트, Panel을 감싼 Album 컴포넌트를 children으로 갖는 다음과 같은 예를 살펴보자.

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

 

위의 경우, 컴포넌트 중 하나라도 데이터를 기다리기 위해 suspend 된다면 

Suspense로 감싼 모든  컴포넌트가 <Loading/>으로 대체된다.

모든 children 컴포넌트가 노출될 준비가 되어서야 비로소 한꺼번에 모두 나타난다.

쓰임 2: 컨텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때

// 하나의 Suspense로 감싸주면
// 하위의 자식들은 가장 가까운 공통의 부모 Suspense boundary를 공유하므로 
// 아래와 같이 Biography와 Panel을 Details 컴포넌트로 옮겨줘도
// 위와 동일하게 동작한다

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

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

---

쓰임 3: 로딩되고 있는 동안 중첩(nested)된 콘텐츠를 노출하고 싶을 때

컴포넌트가 suspend 되면, 가장 가까운 부모 Suspense 컴포넌트가 fallback을 보여준다.

따라서 여러 개의 Suspense 컴포넌트를 중첩해서 로딩 시퀀스를 만들 수 있다.

콘텐츠가 준비되면 상위의 Suspense Boundary의 fallback은 해당 콘텐츠로 채워진다.

 

다음과 같이 Album리스트만의 fallback을 주는 경우를 살펴보자.

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

 

위와 같은 경우에는 Album의 리스트가 로딩될 때까지 Biography의 콘텐츠가 기다려줄 필요가 없어진다.

 

시퀀스 흐름은 다음과 같다.

1. Biography 컴포넌트가 로딩되지 않았다면 BigSpinner가 전체 콘텐츠를 대신해서 노출된다.
2. Biography 컴포넌트가 로딩을 마치면 해당 콘텐츠로 BigSpinner를 대체한다.
3. Albums이 아직 로드되지 않았다면, AlbumsGlimmer가 Albums와 Albums의부모 컴포넌트인 Panel 대신에 노출된다.
4. Albums이 로딩을 마치면 AlbumsGlimmer를 해당 콘텐츠로 대체한다.

쓰임 3: 로딩되고 있는 동안 중첩(nested)된 콘텐츠를 노출하고 싶을 때

 

Suspense boundary를 어디에 배치하느냐에 따라

어떤 UI를 동시에 짠! 하고 보이게 할지, 또는 로딩 상태에 따라서 점진적으로 보이게 할지 정할 수 있다.

 

하지만 모든 컴포넌트에 Suspense boundary를 넣는 건 바람직하지 않다.

유저가 경험할 로딩 시퀀스보다 더 세세하게 나눠서 넣으면 안 된다. 

디자이너와 함께 작업을 하고 있다면, 로딩 상태가 언제 보여야 할지 상의하는 게 좋다. 이미 디자인 와이어 프레임에 반영되어 있을 가능성이 매우 높기 때문

---

쓰임 4: 새 (fresh) 콘텐츠를 로딩하고 있는 동안 직전(stale) 콘텐츠를 보여줄 때

검색 결과를 fetch 해오는 동안 SearchResults 컴포넌트가 suspend 되는 예를 살펴보자.

'a'를 입력하는 동안 검색 결과를 대기하고, 'ab'라고 수정하면 'a'로 검색했던 결과가 loading fallback으로 대체된다.

 

import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';

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

 

쓰임 4: 새 (fresh) 콘텐츠를 로딩하고 있는 동안 직전(stale) 콘텐츠를 보여줄 때

 

새로운 검색 결과가 준비될 때까지 이전의 검색 결과를 보여줘서 리스트 업데이트를 defer 하는 UI 패턴으로도 흔히 대체할 수 있다.

useDeferredValue를 활용하면 defer 된 버전의 쿼리를 넘길 수 있게 한다.

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        // query는 즉시 업데이트 되기 때문에 바로 새 값을 보여준다 
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
      // 하지만 deferredQuery는 새로운 데이터가 로드되기 전까지 이전 데이터를 보여주고
      // SearchResults는 stale(이전) 결과를 보여준다
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

 

🤔 어? 근데 이러면 이전(stale)했던 값인 지 새로운(fresh)한 값인 지 구분하기 어렵지 않을까?

 

그럴 경우 다음과 같이 이전 검색 결과의 투명도를 낮춰서 시각적인 지표를 유저에게 제공할 수 있다.

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

 

이제 이전 결과를 placeholder처럼 사용하고 다음 검색 결과가 준비되면 해당 데이터의 컴포넌트를 볼 수 있다.

 

import { Suspense, useState, useDeferredValue } from 'react';
import SearchResults from './SearchResults.js';

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

 

쓰임 4: 새 (fresh) 콘텐츠를 로딩하고 있는 동안 직전(stale) 콘텐츠를 보여줄 때

 

📝 Note
Defer 된 값과 Transitions 모두 inline indicator 대신 Suspense fallback가 노출되는 걸 방지한다.
    - Transitions는 업데이트 전체를 급하지 않은(non-urgent) 작업으로 표시해서 일반적으로 프레임워크와 navigation 위한 router 라이브러리에 주로 사용한다.
    - Defer된 값들은 주로 UI 일부분을 급하지 않은 작업으로 표시하고, 나머지 UI들 보다 살짝 뒤처지게끔 하고 싶을 때 유용하게 쓸 수 있다.

---

쓰임 5: 이미 노출된 콘텐츠를 숨기는 걸 방지하고 싶을 때

컴포넌트가 suspend 되면 가장 가까운 부모 Suspense boundary는 이 fallback을 대신 보여준다.

이는 유저한테 이미 콘텐츠를 보여주고 있는 상황에서 발생하면 오히려 부정적인 UX를 제공한다.

 

아래와 같이 버튼을 클릭해서 Router컴포넌트가 IndexPage대신 ArtistPage를 렌더 하는 경우를 살펴보자.

ArtistPage 내부의 컴포넌트가 suspend 되었기 때문에 가장 가까운 상위의 Suspense boundary의 fallback을 보여주기 시작한다.

근데 가장 가까운 Suspense boundary는 root와 가까웠기 때문에 전체 레이아웃이 BigSpinner 컴포넌트로 대체된다.

// App.js

import { Suspense, useState } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

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

  function navigate(url) {
    setPage(url);
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <div className="layout">
      <section className="header">
        Music Browser
      </section>
      <main>
        {content}
      </main>
    </div>
  );
}

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

// Index.js

export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}

// ArtistPage.js

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

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

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}

 

쓰임 5: 이미 노출된 콘텐츠를 숨기는 걸 방지하고 싶을 때

 

이렇게 상위의 Suspense boundary의 fallback이 전체 컴포넌트를 대체하는 상황을 방지하기 위해서는 

navigation state update를 Transition으로 표시해 둘 수 있다.

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

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

 

startTransition으로 표시함으로써 리액트한테  상태변환(state transition)이 급한 게 아니라는 걸 알려줄 수 있고,

이미 노출된 콘텐츠들을 숨기는 것보다 이전 페이지에 있던 것들을 유지하라고 지시할 수 있다.

 

이제 startTransition으로 표시한 예시를 살펴보자면 버튼 클릭이 Biography가 로드될 때까지 기다린다.

startTransition으로 이미 노출된 콘텐츠가 숨겨지지 않도록 할 수 있다.

Transition은 모든 콘텐츠가 로드될 때까지 기다려주지는 않지만 이미 노출된 콘텐츠를 숨기지 않을 만큼은 기다려준다.

예를 들면, 레이아웃(Musci Broswer 테두리)은 이미 공개가 되었기 때문에 로딩 스피너로 해당 영역을 가려주는 건 좋은 생각은 아닌 거 같다. 하지만 Albums를 감싸고 있는 중첩된 Suspense boundary는 새로운 콘텐츠이기 때문에 Transition이 기다려줄 필요가 없고, 로딩 스켈레톤을 보여준다.

 

📝 Note
Suspense-enabled 라우터들은 기본적으로 Transition으로 navigation update가 감싸져야 한다.

---

쓰임 6: Transition이 일어나고 있다는 걸 알리고 싶을 때

직전에 살펴봤던 예시는 버튼을 클릭하면 실제로 navigation이 진행 중이라는 걸 알 수 있는 시각적인 힌트가 없다.

 

 

시각적인 힌트를 주고 싶다면 startTransition 대신 useTransition을 사용하면 isPending 불리언 값을 주는 useTransition을 쓸 수 있다.

다음 예시에서는 navigation이 진행 중이라는 시각적 힌트로 Music Browser 헤더의 색상을 핑크색으로 변경하는 예를 살펴보자.

 

// App.js

import { Suspense, useState } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

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

  const [isPending, startTransition] = useTransition();   /** 추가 된 부분 */

  function navigate(url) {
    startTransition(() => {    /** 추가 된 부분 */ 
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <div className="layout">
    // 추가된 부분
      <section className="header" style={{
        backgroundColor:  isPending ? 'pink' : 'black'
      }}>
        Music Browser
      </section>
      <main>
        {content}
      </main>
    </div>
  );
}

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

// Index.js

export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}

// ArtistPage.js

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

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

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}

useTransition을 활용해서 현재 navigation이 진행 중이라는 시각적 힌트를 줄 수 있다

---

쓰임 7: navigation이 발생할 때 Suspense boundary들을 리셋하고 싶을 때

Transition 도중에 리액트는 이미 노출된 콘텐츠를 숨기지 않으려고 한다.

하지만 다른 파라미터로 다른 route으로 navigate 하려고 할 때 리액트한테 이를 다른 콘텐츠라고 알려주고 싶을 수 있다.

이는 key를 활용해서 나타낼 수 있다.

<ProfilePage key={queryParams.id} />

 

유저 프로필 페이지에서 navigate 하고 있는데 어떤 요소가 suspend 된다고 생각해 보자.

만약 업데이트가 Transition으로 감싸져 있다면 이미 보이는 콘텐츠를 fallback으로 대체되지는 않는다.

이는 예상된 동작이다.

 

하지만 서로 다른 유저 프로필 간에 navigate을 한다고 가정해 보자.

이 경우에는 fallback이 보이는 것이 자연스러운 동작 같다.

예를 들어, 하나의 유저 타임라인은 다른 유저의 타임라인과는 다른 콘텐츠다.

이를 key로 특정화한다면 리액트가 다른 유저들 간의 프로필은 다른 컴포넌트로 취급하도록 하고,

Suspense boundary가 navigation 도중에 리셋되도록 한다.

Suspense가 통합된 라우터들은 이를 자동적으로 하고 있을 것이다.

 

쓰임 8: 서버 에러 발생 시와 클라이언트에만 해당하는 콘텐츠를 보여줄 fallback을 제공하고 싶을 때

streaming server rendering APIs를 사용 중이거나 이에 의존하고 있는 프레임워크를 사용하고 있다면 리액트는 서버에서 발생하고 있는 에러들도 Suspense boundary가 처리하도록 할 것이다.

만약 컴포넌트가 서버 쪽의 에러를 던진다면 리액트는 서버 렌더를 포기하는 대신 가장 가까운 상위의 Suspense 컴포넌트룰 찾아서 생성된 서버 HTML에 스피너와 같은 fallback을 추가해 준다.

유저들은 가장 먼저 이 스피너를 보게 될 것이다.

 

클라이언트 쪽에서 리액트는 계속해서 같은 컴포넌트를 렌더 하는 것을 시도할 것이다. 

클라이언트 쪽에서의 에러도 리액트는 에러를 던지고 가장 가까운 곳의 error boundary를 보여준다.

하지만 클라이언트 쪽의 에러가 아니라면 fallback을 보여준 거였다고 해도 쨋든 성공적으로 뭔가를 제공했기 때문에

리액트는 유저한테 에러를 보여주지 않을 것이다.

 

이 특성을 활용해 특정 컴포넌트가 서버 쪽에 렌더 되지 않도록 할 수 있다.

다음과 같이 서버 환경에서 에러를 던지고 이를 Suspense boundary로 감싸주면 HTML fallback으로 대체된다.

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

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

 

서버 HTML에서는 로딩 중이라는 힌트 (Loading fallback)이 제공되고,

클라이언트 쪽에서는 Chat 컴포넌트로 대체된다.

---

☄️ 트러블 슈팅

🗣️ 업데이트 도중에 fallback으로 UI가 대체되는 건 어떻게 막나요?

 

눈에 보이는 UI를 fallback으로 바꿔치기하는 건 유저한테 그다지 좋은 경험은 아니다.

이는 업데이트가 발생하면 컴포넌트가 suspend 되어 가장 가까운 Suspense boundary가 이미 유저한테 콘텐츠를 보여주고 있는 경우에 일어날 수 있다.

 

이런 일이 발생하는 것을 막기 위해서는 업데이트를 startTranstion으로 감싸줘서 해당 업데이트가 급한 일이 아니(non-urgent)라는 것을 알려주면 된다 (mark the update as non-urgent using startTransition). Transition 도중에 리액트는 원하지 않는 fallback이 보이는 상황을 피하기 위해서 충분한 데이터가 로딩될 때까지 기다린다.

function handleNextPageClick() {
  // If this update suspends, don't hide the already displayed content
  startTransition(() => {
    setCurrentPage(currentPage + 1);
  });
}

이미 쓰임 5에서 다룬 내용이기도 하지만, 이렇게 하면 이미 노출된 콘텐츠를 숨기는 일은 피할 수 있다.

하지만 새롭게 렌더 된 Suspense boudnary는 UI 블로킹을 방지하기 위해 여전히 fallback을 보여주고 콘텐츠가 준비되어야 유저가 볼 수 있도록 한다.

즉, 리액트는 급하지 않은(non-urgent) 업데이트에 한에서만 fallback이 보이지 않게 한다.

급한 업데이트라면 렌더가 미뤄지지 않기 때문에 startTransition 나 useDeferredValue로 업데이트가 급하지 않다는 걸 표시해야 한다.

라우터가 Suspense와 통합되어 있다면 자동적으로 startTransition으로 업데이트를 자동적으로 감싸고 있어야 한다.

---

📚 References

<Suspense> – React

---

🤔 TMI, 느낀 점

헉.. 지금까지 리액트(nextjs ❎)에서 tanstack-query+Suspense를 쓰고 있었는데 불안정한 feautre였다니..

적잖은 충격.. 다음에는 Error boundary를 살펴봐야겠다. 클라이언트 쪽에서 에러가 발생하면 상위의 가장 가까운 Error boundary를 보여준다고 했는데, vinylify에서 Error boundary 를 추가해주지 않았던..😱