서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 ... - 인프런

Next + React Query로 SNS 서비스 만들기

Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

작성

수정됨

auto

export default function Weekday() {
  return (
    <Suspense fallback={<WeekdayBannerLoading />}>
      <WeekdayMiniBanner />
    </Suspense>
  );
}

export default function WeekdayMiniBanner() {
  const { banners } = use(getBanners( params ));

  if (banners.length === 0) return null;

  return (
    <div className={cn('wrapper')}>
      <WeekdaySwiper data={banners} />
    </div>
  );
}

이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다.

suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다...

아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠...

참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)

react next.js react-query next-auth msw

답변 2

제로초(조현영)

지식공유자

혹시 Weekday 페이지가 SSR이 적용된 페이지가 맞나요? SSR이 적용되어 있어야 서버에서 처음에 fallback을 렌더링해서 보내줍니다. 또한 잠깐 빈 화면이 노출된다 하셨는데, 이게 네트워크 로딩 중이라 빈 화면이 나오는건지, 아니면 네트워크 로딩이 다 되고 리액트 렌더링이 됐는데도 빈 화면이 나오는건지 알아야 합니다. 네트워크 로딩 중이라 빈 화면이 나오는건 당연한 거라서요.

변재정

질문자

아 빈 화면이라는 단어 선택에 오해의 소지가 있네요.

페이지 전체 빈화면이 아니라 suspense로 감싼 fetch 컴포넌트만 그려지지 않는다는 의미였습니다.

나머지 리액트 layout, 기본 ui는 정상적으로 렌더링되고 브라우저에 그려진 상태입니다.

또한 해당 컴포넌트에서 서버 fetch가 이루어지기 때문에 ssr이 적용된 페이지가 맞습니다.

프로미스에 settimeout 걸어서 비동기 요청을 의도적으로 지연시켜 테스트해보니 정상적으로 fallback ui를 렌더링하더군요.

디버깅해보니 api 응답값 사용처 클라이언트 컴포넌트 로직이 문제였던 것 같습니다. 제 코드 문제였네요.. 답변 감사합니다!!

추가로 궁금한게 만약 비동기 요청자체가 무겁지 않아 빠르게 응답되는 경우라면 suspense를 안하는게 나은 걸까요??

제로초(조현영)

지식공유자

네네 fallback ui가 반드시 ssr되어야하는게 아니라면 안 하시는게 나을 수도 있습니다.

변재정

질문자

그렇군요 답변 감사합니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 변재정님이 질문하신 내용을 살펴보니, Suspense 사용 시 새로고침하면 잠시 동안 빈 화면이 노출된 후에 fallback UI가 표시되는 문제가 발생한다고 하셨습니다. 이 문제는 Suspense와 관련된 일반적인 문제 중 하나로, 몇 가지 가능한 원인과 해결 방법을 안내드리겠습니다.

Suspense 동작 원리

Suspense는 Promise가 pending 상태일 때, 그 Promise에 의해 “잠긴” 컴포넌트의 UI를 대신해 fallback UI를 표시합니다. 즉, 데이터 fetching이 완료되기 전까지 fallback UI로 대체되며, 이는 정상적인 동작입니다.

문제의 원인

새로고침 시 초기 로드에서 빈 화면이 잠시 나타나는 이유는 여러 가지가 있을 수 있습니다:
- 렌더링 순서 문제: React의 초기 렌더링 시점에서 Suspense의 fallback UI를 잡아내지 못하는 경우가 발생할 수 있습니다.
- 스타일이나 레이아웃 문제: CSS 로딩 지연 또는 스타일링 관련 문제로 인해 UI가 보이지 않을 수 있습니다.

개선 방법

React.StrictMode 사용 확인: 개발 환경에서 React.StrictMode는 컴포넌트가 두 번 렌더링 되어 일부 문제를 노출시키기도 합니다. 배포 환경에서 이런 문제가 발생하는지 확인하세요.
스타일 및 레이아웃 점검: CSS가 올바르게 로드되고 적용되었는지, 그리고 레이아웃이 초기 로드 시 발생할 수 있는 깜박임 현상에 영향을 주지 않는지 확인하세요.
next.js 커스텀 로더 사용: 새로고침 시 초기 로딩 퍼포먼스를 높이기 위해 next/script의 beforeInteractive 등 옵션을 사용하여 JS 로딩 방식을 최적화할 수 있습니다.
서버 사이드 렌더링(SSR): 콘텐츠를 미리 서버사이드에서 렌더링하여 첫 화면 로딩을 빠르게 할 수 있도록 설정해 보세요. 이를 통해 초기에 빈 화면이 나타나는 것을 방지할 수 있습니다.

관련 URL:
- 공식문서 Suspense 예시 코드을 확인하여 Suspense 구조에 따라 올바르게 구현했는지 다시 검토해 보시는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

Suspense 동작 원리

문제의 원인

개선 방법