서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
82
작성자 없음
0 asked
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로 구성되어있습니다! (클라이언트 컴포넌트)
Answer 1
0
안녕하세요, 인프런 AI 인턴입니다. 변재정님.
Suspense는 비동기적인 데이터 로딩을 간단히 처리할 수 있게 도와주는 리액트의 기능 중 하나입니다. 귀하의 코드에서 관찰된 현상은 Suspense를 사용할 때 종종 발생하는 문제입니다. 예상하신 대로, Suspense는 promise가 pending 상태일 때 fallback UI를 보여주도록 설계되어 있지만, 새로고침 시에 빈 화면이 잠깐 보이는 문제는 여러 가지 원인으로 발생할 수 있습니다.
가능한 원인 및 해결책:
JavaScript 배치 지연:
- 새로고침 시 브라우저가 JavaScript 로드를 처리하는 동안 UI 준비가 되지 않아 빈 화면이 잠깐 보일 수 있습니다. 이 현상은 네트워크의 상태나 브라우저 성능에 따라 더 두드러질 수 있습니다.
- 새로고침 시 브라우저가 JavaScript 로드를 처리하는 동안 UI 준비가 되지 않아 빈 화면이 잠깐 보일 수 있습니다. 이 현상은 네트워크의 상태나 브라우저 성능에 따라 더 두드러질 수 있습니다.
CSS 스타일 로드 딜레이:
- 스타일 시트 로딩이 지연되어 첫 화면에 요소가 렌더링되지 않고 있는 경우가 있습니다. 이 경우 캐시를 확인하거나 스타일 시트를 빠르게 로드할 수 있도록 최적화하는 것이 도움이 됩니다.
- 스타일 시트 로딩이 지연되어 첫 화면에 요소가 렌더링되지 않고 있는 경우가 있습니다. 이 경우 캐시를 확인하거나 스타일 시트를 빠르게 로드할 수 있도록 최적화하는 것이 도움이 됩니다.
서버측 Hydration 문제:
- 서버에서 초기 렌더링이 완료되지 않거나 데이터 페칭이 예상보다 오래 걸릴 경우 해당 이슈가 발생할 수 있습니다. 이는 서버측 렌더링과 클라이언트측 Hydration이 맞지 않아서 일어날 수도 있습니다.
- 서버에서 초기 렌더링이 완료되지 않거나 데이터 페칭이 예상보다 오래 걸릴 경우 해당 이슈가 발생할 수 있습니다. 이는 서버측 렌더링과 클라이언트측 Hydration이 맞지 않아서 일어날 수도 있습니다.
이 문제에 대한 구체적인 원인과 해결책은 아래 링크된 문서에서 약간 다른 경우일 수 있으나 도움이 될 수 있는 유사 답변들이 제공되고 있습니다:
- template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유 - 페이지 이동 시 서버와 클라이언트의 상태 불일치 문제를 다루고 있습니다.
혹시 Suspense의 기능이 정확히 작동하지 않는 듯한 느낌이 든다면, 위 사항들을 점검하고 코드가 의도대로 동작하는지 확인해보시는 것도 좋은 방법입니다. 빈 화면이 잠깐 보이는 것은 사용자의 경험에 악영향을 미칠 수 있으므로 최적화가 필요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
클로드코드 유료플랜 할인 방법이 있을까요?
0
15
0
제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.
0
7
1
API Error : 400 에러의 원인과 해결방법이 궁금합니다!!
0
15
2
퍼미션 권한 설정 문의
0
17
2
Next.js + Tanstack Query BFF 구조 질문
0
10
1
커서에서 shift+enter가 안됩니다.
0
18
2
template 동작 흐름에 대해서 질문 있습니다.
1
70
1
Link 컴포넌트는 그러면 웬만하면 무조건 쓰는편이 좋은가요?
0
82
2
middleware.ts가 proxy.ts로 변경되고 실행 시점도 바뀌었다네요
1
243
2
PPR을 보고 오라고 하시는데
1
82
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
59
1
강의에 언급된 영상 질문
0
70
2
next Request Memoization과 react cache
0
80
1
next.js 서버fetch 에러 fallback ui 구현 방법
0
197
2
필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??
0
88
2
template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유
1
89
1
layout 컴포넌트 내 클라이언트 컴포넌트
0
84
2
게시판 리스트 작성할 때 use client를 어디서부터 붙여야할지 모르겠어요
0
89
1
'왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하는 영상들이 무엇일까요?
0
149
2
Parallel Route를 사용한 모달에 대해 질문이 있어요.
0
112
2
유튜브 영상과의 차이점 문의
0
235
1
template.tsx 가 SEO 에 주는 이점에 대한 질문
0
104
2
자동화 스크립트 관련하여 질문있습니다.
0
109
2
색션1 예제 코드 질문드립니다.
0
208
1