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

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로 구성되어있습니다! (클라이언트 컴포넌트)

안녕하세요, 인프런 AI 인턴입니다. 변재정님.

Suspense는 비동기적인 데이터 로딩을 간단히 처리할 수 있게 도와주는 리액트의 기능 중 하나입니다. 귀하의 코드에서 관찰된 현상은 Suspense를 사용할 때 종종 발생하는 문제입니다. 예상하신 대로, Suspense는 promise가 pending 상태일 때 fallback UI를 보여주도록 설계되어 있지만, 새로고침 시에 빈 화면이 잠깐 보이는 문제는 여러 가지 원인으로 발생할 수 있습니다.

가능한 원인 및 해결책:

JavaScript 배치 지연:
- 새로고침 시 브라우저가 JavaScript 로드를 처리하는 동안 UI 준비가 되지 않아 빈 화면이 잠깐 보일 수 있습니다. 이 현상은 네트워크의 상태나 브라우저 성능에 따라 더 두드러질 수 있습니다.
CSS 스타일 로드 딜레이:
- 스타일 시트 로딩이 지연되어 첫 화면에 요소가 렌더링되지 않고 있는 경우가 있습니다. 이 경우 캐시를 확인하거나 스타일 시트를 빠르게 로드할 수 있도록 최적화하는 것이 도움이 됩니다.
서버측 Hydration 문제:
- 서버에서 초기 렌더링이 완료되지 않거나 데이터 페칭이 예상보다 오래 걸릴 경우 해당 이슈가 발생할 수 있습니다. 이는 서버측 렌더링과 클라이언트측 Hydration이 맞지 않아서 일어날 수도 있습니다.

이 문제에 대한 구체적인 원인과 해결책은 아래 링크된 문서에서 약간 다른 경우일 수 있으나 도움이 될 수 있는 유사 답변들이 제공되고 있습니다:

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유 - 페이지 이동 시 서버와 클라이언트의 상태 불일치 문제를 다루고 있습니다.

혹시 Suspense의 기능이 정확히 작동하지 않는 듯한 느낌이 든다면, 위 사항들을 점검하고 코드가 의도대로 동작하는지 확인해보시는 것도 좋은 방법입니다. 빈 화면이 잠깐 보이는 것은 사용자의 경험에 악영향을 미칠 수 있으므로 최적화가 필요합니다.

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

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

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

가능한 원인 및 해결책: