refactor: 페이지 전환 논블로킹 전환 (pending 쿼리 스트리밍) - #360
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다. |
|
Warning Review limit reached
Next review available in: 52 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughReact Query가 pending 쿼리를 dehydration하도록 설정되었고, 여러 페이지의 prefetch 대기가 제거되었습니다. 탈퇴 안내 조회를 클라이언트로 이동했으며, BottomTabBar를 전역 레이아웃에 배치하고 탭 라우팅을 즉시 처리하도록 변경했습니다. Changes페이지 전환 스트리밍
전역 하단 탭 내비게이션
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant BottomTabBar
participant NextRouter
participant ServerPage
participant QueryClient
User->>BottomTabBar: 탭 누르기
BottomTabBar->>NextRouter: router.prefetch(href)
User->>BottomTabBar: 제스처 종료
BottomTabBar->>NextRouter: router.push(href)
NextRouter->>ServerPage: 페이지 전환
ServerPage->>QueryClient: 비대기 prefetch 및 pending dehydrate
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/page-transition-refactoring.md`:
- Around line 3-4: Update the 전수조사 반영 date in the document header to 2026-07-19,
keeping the 작성일 and 대상 metadata unchanged.
- Around line 43-46: Update the staleTime execution plan to reflect the
completed 5-minute override for me in useGetMe, distinguishing it from the
60-second default. Mark this item as verified rather than future tuning, and
remove the claim that there are zero individual staleTime overrides while
preserving the pending shouldDehydrateQuery work.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6ff65db9-695a-4b54-8fc4-7cf22261a1a4
📒 Files selected for processing (13)
apps/web/src/app/home/_components/tournament-list/index.tsxapps/web/src/app/mypage/edit/page.tsxapps/web/src/app/mypage/page.tsxapps/web/src/app/mypage/withdraw/_components/WithdrawGreeting.tsxapps/web/src/app/mypage/withdraw/page.tsxapps/web/src/app/notification/page.tsxapps/web/src/app/tournament/[id]/create/page.tsxapps/web/src/app/tournament/[id]/result/group/page.tsxapps/web/src/app/tournament/join/[id]/page.tsxapps/web/src/components/bottom-tab-bar/index.tsxapps/web/src/hooks/useGetMe.tsapps/web/src/utils/queryClient.tsdocs/page-transition-refactoring.md
kanghaeun
changed the title
…sition # Conflicts: # apps/web/src/app/home/_components/tournament-list/index.tsx # apps/web/src/app/mypage/withdraw/page.tsx
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
iOdiO89
left a comment
iOdiO89
left a comment
There was a problem hiding this comment.
내용 내가 좀 정리하면서 하나 더 추가했어!
변경사항
- void queryClient.prefetch → queryClient.prefetch로 변경 (void 명시 삭제. 불필요)
- 일부 중복된 주석 삭제
추가사항
- BottomTab 클릭 시 페이지 전환 지연 발생 → layout으로 BottomTab 위치 옮겨 지연 삭제
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/home/_components/tournament-list/index.tsx`:
- Around line 19-22: Update the prefetchQuery configuration to use the same
queryKey shape as TournamentListClient, including the limit value of 3 alongside
TOURNAMENT_LIST_STATUS. Keep the queryFn request parameters aligned with that
prefetched list so hydration reuses the cache instead of issuing a duplicate
request.
In `@apps/web/src/components/bottom-tab-bar/index.tsx`:
- Around line 118-121: Update the prefetch logic around pressTabForPrefetch in
the bottom tab bar to also prefetch the drag snap destination represented by
TABS[targetIndex]. Ensure the route selected by handleUp is prefetched even when
dragging starts on the active tab and pressIndex equals activeIndex, while
preserving the existing click prefetch behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1e8eb808-9989-4042-ad62-9b4668e84547
📒 Files selected for processing (12)
apps/web/src/app/archive/tournament/page.tsxapps/web/src/app/archive/wish/_components/WishlistBottomBar.tsxapps/web/src/app/home/_components/tournament-list/index.tsxapps/web/src/app/home/page.tsxapps/web/src/app/layout.tsxapps/web/src/app/mypage/edit/page.tsxapps/web/src/app/mypage/page.tsxapps/web/src/app/notification/page.tsxapps/web/src/app/tournament/[id]/create/page.tsxapps/web/src/app/tournament/[id]/result/group/page.tsxapps/web/src/app/tournament/join/[id]/page.tsxapps/web/src/components/bottom-tab-bar/index.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/web/src/app/tournament/join/[id]/page.tsx
- apps/web/src/app/tournament/[id]/create/page.tsx
- apps/web/src/app/mypage/page.tsx
- apps/web/src/app/tournament/[id]/result/group/page.tsx
2 participants
작업 요약
작업 세부 내용
배경
페이지 전환 시 RSC 가
await prefetchQuery()로 백엔드 응답을 다 기다린 후에야 화면을 내려줘서, 클라 캐시가 fresh 해도 매 전환마다 서버 왕복만큼 이전 화면에 멈추는 문제. 전수조사 결과는page-transition-refactoring.md참고.1. 스트리밍 전제 설정
queryClient의dehydrate.shouldDehydrateQuery에 pending 포함 — RSC 가 fetch 완료를 기다리지 않고 진행 중인 promise 를 스트리밍 (TanStack Query v5 공식 패턴)2. await 제거 (6곳)
notification·tournament/[id]/result/group(자체 isPending/isError 폴백 완비)mypage·mypage/edit·tournament/join/[id](useSuspenseQuery 소비)home/_components/tournament-list— page.tsx 가 아닌 자식 RSC 의 숨은 블로킹이라 전수조사에서 추가 발견3. 레이아웃과 중복된 fetch 제거 (2곳)
tournament/[id]/create:['tournament']prefetch 삭제 — 상위 layout 이 이미 조회·시드mypage/withdraw: 페이지 측getMe()삭제 — layout 과 이중 블로킹이었음. 닉네임 문구는WithdrawGreeting클라 컴포넌트가 layout 이 시드한 캐시를 읽음 (추가 요청 없음)4. 탭바 프리페치
router.push" 구조라, 애니메이션 동안 목적지 라우트를router.prefetch(탭·드래그 스냅 양쪽) → push 시점엔 페이로드 도착 완료5. staleTime
['me']60초 → 5분 (유저 정보는 거의 안 변함 — 즉시 전환 유효 범위 확대)체감 변화
변경하지 않은 것 (의도)
match·result·login페이지, 레이아웃 3종(tournament/[id] · archive · withdraw) — 데이터 기반 redirect/권한 가드 의존이라 await 유지검증
연관 이슈
closes #359
Summary by CodeRabbit