"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {PrefetchBlockingDemo, TransitionTabsDemo} = _components; if (!PrefetchBlockingDemo) _missingMdxReference("PrefetchBlockingDemo", true); if (!TransitionTabsDemo) _missingMdxReference("TransitionTabsDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "App Router 페이지에서 전환이 굼떴다. 상세 페이지의 View Details를 눌러도 데이터가 올 때까지 무반응, 메인 페이지는 탭 UI조차 로딩 완료 전엔 안 보이고, 탭을 바꾸면 응답이 올 때까지 이전 탭이 그대로다. 빠른 사무실 네트워크에서는 몰랐는데 3G 쓰로틀링을 거니 체감이 처참했다." }), "\n", _jsxs(_components.p, { children: ["이 여정의 끝에서 한참 뒤 ", _jsx(_components.a, { href: "/trouble-shooting/22-nextjs-16-cache-components-migration", children: "Cache Components 마이그레이션" }), "이라는 더 근본적인 답을 만나게 되는데, 이 글은 그 전에 같은 프로젝트에서 컴포넌트 레벨로 싸웠던 기록이다. 여기서 잡은 원칙들이 이후 마이그레이션의 토대가 됐다."] }), "\n", _jsx(_components.h2, { id: "시도-1-사용자가-먼저-봐야-할-것을-suspense-밖으로", children: "시도 1: 사용자가 먼저 봐야 할 것을 Suspense 밖으로" }), "\n", _jsxs(_components.p, { children: ["상세 페이지의 첫 문제는 Back 버튼과 제목까지 Suspense 안에 있던 것이다. 데이터를 기다리는 ", _jsx(_components.code, { children: "useSuspenseQuery" }), "가 같은 컴포넌트에 있으니, 데이터와 무관한 UI까지 함께 묶이게 됐다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// Before: 전부 Suspense 안 → 로딩 동안 빈 화면\n}>\n {/* Back 버튼이 이 안에 */}\n\n\n// After: 정적 헤더는 밖, 데이터 컴포넌트만 안\n

\n \n Case Intake\n

\n}>\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["클릭 즉시 헤더가 뜨고 본문 자리만 스켈레톤이 채운다. Suspense 경계는 로딩 처리 장치이기 전에 ", _jsx(_components.strong, { children: "\"무엇이 데이터를 기다릴 자격이 있는가\"를 가르는 선" }), "이라는 것, ", _jsx(_components.a, { href: "/trouble-shooting/22-nextjs-16-cache-components-migration", children: "22번 글" }), "에서 정적 shell의 칼이 되는 그 원칙이 여기서 처음 잡혔다."] }), "\n", _jsx(_components.h2, { id: "시도-2-서버의-await가-페이지-전체를-잡고-있었다", children: "시도 2: 서버의 await가 페이지 전체를 잡고 있었다" }), "\n", _jsx(_components.p, { children: "메인 페이지는 서버 컴포넌트의 prefetch가 범인이었다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export default async function PAPage({ searchParams }) {\n const queryClient = getQueryClient();\n await queryClient.prefetchQuery({ ... }); // 이 await가 응답을 잡는다\n return ...;\n}\n" }) }), "\n", _jsx(_components.p, { children: "서버 컴포넌트의 await는 그 아래 모든 출력의 선행 조건이다. 데이터가 900ms 걸리면 Title 한 줄도 900ms 뒤에 온다." }), "\n", _jsx(PrefetchBlockingDemo, {}), "\n", _jsxs(_components.p, { children: ["두 단계로 풀었다. 먼저 prefetch와 HydrationBoundary를 자식 async 컴포넌트로 내리고 Suspense로 감싸 Title이 먼저 나가게 했고, 그래도 남는 지연은 ", _jsx(_components.code, { children: "await" }), "를 ", _jsx(_components.code, { children: "void" }), "로 바꿔 fire-and-forget으로 만들었다. 서버는 페칭을 시작만 해두고 응답을 보내고, 못 끝낸 데이터는 클라이언트의 ", _jsx(_components.code, { children: "useSuspenseQuery" }), "가 이어받는다."] }), "\n", _jsxs(_components.p, { children: ["이건 공짜가 아니라 의도적인 절충이다. ", _jsx(_components.code, { children: "dehydrate" }), " 시점에 캐시가 비어 있으면 클라이언트가 재요청을 하게 되어 SSR prefetch의 이점을 일부 포기한다. 정적 UI의 즉시 표시가 그 비용보다 가치 있다고 판단한 것이고, 트레이드오프는 코드 주석에 박아뒀다."] }), "\n", _jsx(_components.h2, { id: "기각된-시도-프레임워크-우회", children: "기각된 시도: 프레임워크 우회" }), "\n", _jsxs(_components.p, { children: ["탭 전환의 굼뜸이 남아서 ", _jsx(_components.code, { children: "window.history.replaceState" }), "로 Next.js 라우터를 우회해 URL만 즉시 바꾸는 워크어라운드도 만들어봤다. 동작은 했다. 그리고 버렸다."] }), "\n", _jsxs(_components.p, { children: ["라우터가 모르는 URL 변경은 내부 상태와 주소의 불일치, prefetch와 캐시 최적화의 무력화, 뒤로가기의 예측 불가능성을 만든다. 무엇보다 다음 사람(미래의 나 포함)이 \"왜 여기만 라우터를 안 쓰지\"를 풀어야 하는 수수께끼가 된다. 단기적으로 동작하는 우회와 장기적으로 빚이 되는 우회를 구분하는 기준은, ", _jsx(_components.strong, { children: "프레임워크가 같은 문제를 풀라고 만들어둔 공식 통로가 있는가" }), "였다. 있었다."] }), "\n", _jsx(_components.h2, { id: "결말-usetransition", children: "결말: useTransition" }), "\n", _jsxs(_components.p, { children: ["React의 ", _jsx(_components.code, { children: "useTransition" }), "은 상태 업데이트를 저우선순위 전환으로 표시한다. 라우터 이동을 transition으로 감싸면, React는 새 화면이 준비되는 동안 ", _jsx(_components.strong, { children: "이전 화면을 그대로 유지" }), "한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const [isPending, startTransition] = useTransition();\n\nconst handleTabChange = useCallback(\n (value: string) => {\n const newUrl = buildTabUrl(value);\n startTransition(() => {\n router.push(newUrl, { scroll: false });\n });\n },\n [searchParams, router],\n);\n\n

\n }>\n \n \n

;\n" }) }), "\n", _jsx(_components.p, { children: "직접 비교해보면 차이가 분명하다." }), "\n", _jsx(TransitionTabsDemo, {}), "\n", _jsxs(_components.p, { children: ["여기서 동작하는 React의 규칙 하나가 핵심이다. ", _jsx(_components.strong, { children: "transition 중에는 이미 화면에 보이는 콘텐츠를 Suspense fallback으로 대체하지 않는다." }), " 그래서 기본 모드에서는 클릭 즉시 스켈레톤이 읽던 내용을 밀어내지만, transition 모드에서는 보던 탭이 흐려진 채 남고(isPending이 그 피드백) 새 탭이 준비됐을 때만 교체된다. 스켈레톤은 처음 진입처럼 보여줄 것이 없을 때의 장치이고, 이미 보여준 것이 있을 때의 장치가 transition인 셈이다."] }), "\n", _jsx(_components.h2, { id: "교훈", children: "교훈" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Suspense 경계는 UI 설계다." }), " Back 버튼, 제목, 탭 버튼처럼 사용자가 먼저 봐야 할 것은 경계 밖에. 이 구분이 나중에 PPR의 정적 shell 구분과 그대로 이어졌다"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "서버 컴포넌트의 await는 응답 시점의 선언이다." }), " 기다릴 가치가 없는 await는 void로, 로딩은 클라이언트 Suspense에 위임한다. 단 그 절충의 비용(캐시 미스 재요청)은 적어두고 한다"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "우회 전에 공식 통로를 찾는다." }), " history API 직접 조작이 동작해도, useTransition이라는 같은 문제용 공식 도구가 있었다"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "느린 네트워크에서 테스트한다." }), " 이 문제들 전부가 빠른 네트워크에서는 보이지 않았다. DevTools 3G 쓰로틀링이 기본 점검 항목이 됐다"] }), "\n"] }), "\n", _jsx(_components.h2, { id: "핵심-정리", children: "핵심 정리" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "데이터와 무관한 정적 UI가 Suspense 안에 있으면 데이터의 인질이 된다. 경계 설계가 체감 성능을 결정한다" }), "\n", _jsxs(_components.li, { children: ["서버 컴포넌트의 ", _jsx(_components.code, { children: "await prefetchQuery" }), "는 페이지 응답 전체를 지연시킨다. fire-and-forget + 클라이언트 Suspense 위임이 절충안이다"] }), "\n", _jsx(_components.li, { children: "탭 전환처럼 이미 콘텐츠가 보이는 상태의 전환은 useTransition으로. transition 중에는 보이는 콘텐츠가 fallback으로 대체되지 않는다는 규칙이 빈 화면 깜빡임을 없앤다" }), "\n", _jsx(_components.li, { children: "isPending은 공짜로 따라오는 로딩 피드백이다. opacity 한 줄이면 사용자는 시스템이 반응했음을 안다" }), "\n"] }), "\n", _jsx(_components.h2, { id: "references", children: "References" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://react.dev/reference/react/useTransition", children: "React: useTransition" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/file-conventions/loading", children: "Next.js: Loading UI and Streaming" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://tanstack.com/query/latest/docs/framework/react/guides/prefetching", children: "TanStack Query: Prefetching" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }