Boaz

표현 자체로는 <code>re-mount</code>가 더 정확합니다. 말씀하신 것처럼 상태가 초기화되는 건 re-render가 아니라, 기존 fiber를 버리고 컴포넌트를 다시 mount하기 때문이어요.다만 강의에서는 “네비게이션이 발생하면 template가 다시 그려진다”는 전체 흐름을 빠르게 이해시키기 위해 <code>re-render</code>라는 표현을 사용했습니다. 구조를 단순하게 전달하기 위한 표현이었다고 볼수 있을것 같아요.더 정확한 표현 다시한번 짚어주셔서 감사합니다. 🤗

template 동작 흐름에 대해서 질문 있습니다.

좋은 질문감사합니다. Next.js를 그냥 “쓰는 단계”를 넘어서 실제로 비용을 의식하기 시작하신것 같아서요.결론부터 말하면, <code>Link</code>는 웬만하면 쓰는 게 맞지만, <code>prefetch</code>까지 무조건 켜는 건 아닙니다.<code>Link</code>의 핵심 가치는 클라이언트 네비게이션이에요. 페이지를 새로고침하지 않고 자연스럽게 이동하게 만드는 것. 그래서 “페이지 이동”이라면 <code><a></code>보다 <code><Link></code>가 기본값에 가깝습니다.다만 prefetch는 조금 다릅니다. App Router 기준으로는 단순한 HTML이 아니라 그 페이지에서 필요한 서버 컴포넌트 결과와 fetch까지 함께 미리 가져옵니다.그래서 랜딩 페이지에서 데이터가 많은 내부 페이지를 무심코 prefetch 하면, 아직 클릭할지도 모르는 페이지를 위해 서버와 네트워크가 먼저 일을 하게 되는 구조가 됩니다. 이 경우엔 말씀주신것처럼 분명히 독이 될 수 있어요.그래서 저는 아래처럼 추천드려요.<ul><li>이동 자체가 목적이면 → <code>Link</code> 사용</li><li>클릭 확률이 높고 가벼운 페이지면 → prefetch 유지</li><li>랜딩 → 무거운 페이지면 → <code>prefetch={false}</code></li></ul><pre><code><Link href="/dashboard" prefetch={false}>
 시작하기
</Link>
</code></pre>이렇게 쓰면 네비게이션은 부드럽게 가져가면서, 데이터 비용은 사용자가 선택한 이후에만 지불하게 되어서요.한 줄로 요약하면,<blockquote>Link는 기본값이고, prefetch는 "필요에 따라" 입니다.</blockquote>이걸 질문으로 던졌다는 것 자체가 이미 Next.js를 “어떻게 쓰느냐”보다 “언제 비용을 쓰느냐”로 보고 있다는 뜻이라, 좋은 질문인 것 같아요 :)

Link 컴포넌트는 그러면 웬만하면 무조건 쓰는편이 좋은가요?

먼저 중요한 변경점 이렇게 말씀해주셔서 감사합니다관련해서 강의도 업데이트 해보겠습니다..! 🙇‍♂&nbsp;&nbsp;

middleware.ts가 proxy.ts로 변경되고 실행 시점도 바뀌었다네요

PPR 은 현재 강의에서 제공하는 섹션 3에 29. Partial Pre Rendering 이 해결하는 문제 이 PPR 에 대한 영상입니다..! 이걸 보시면 되어요 🙂 (섹션 위주로 재편성하다보니 순서를 헷갈리게 배치한점 양해 부탁드립니다.) 또한, VDOM 에 관한 설명은 아마도 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=2EbCEluOO9Y">https://www.youtube.com/watch?v=2EbCEluOO9Y</a> 이 영상인것 같아요..!(이건 next.js 라기보단 react 에 속해있어서.. 따로 강의 목록에 포함하지는 않았어요. 그러는 바람에 유튜브 채널에서 보실수 있을것 같아요.. 불편을 드려 죄송해요 🙏)

PPR을 보고 오라고 하시는데

안녕하세요!말씀하신 에러 관련 영상은 아래 입니다 😀<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/Afo2f-mO5n8?si=KPYcqWpsvVvbSH39">https://youtu.be/Afo2f-mO5n8?si=KPYcqWpsvVvbSH39</a>함께 공부해주셔서 감사합니다 :)

강의에 언급된 영상 질문

안녕하세요. 먼저 깊이 있는 질문 주셔서 감사합니다.🤗바로 답변 드릴게요.<ul><li>적용 범위 Request Memoization은 한 번의 서버 요청(=한 번의 React 트리 렌더링) 동안만 유효합니다. 같은 트리(레이아웃·페이지·서버 컴포넌트들) 안에서 같은 <code>fetch</code>(동일 URL+옵션)를 여러 번 호출해도 1번만 나갑니다. 하지만 /dashboard와 /home처럼 서로 다른 페이지 요청은 각각 별도 요청이므로 서로 공유되지 않습니다. 또한 React 컴포넌트 트리 밖(예: Route Handler)에는 적용되지 않습니다. 참고 - <a target="_blank" rel="noopener" class="flex h-4.5 overflow-hidden rounded-xl px-2 text-[9px] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out" href="https://nextjs.org/docs/app/guides/caching">Next.js</a></li><li>파라미터가 다르면? 아니요. 메모이제이션 키는 **URL + fetch 옵션(메서드/헤더/바디 등)**이 동일할 때만 일치합니다. 쿼리 스트링이나 헤더가 달라지면 다른 요청으로 간주되어 중복 제거되지 않습니다. 추가로 메모이제이션은 GET만 대상입니다. 참고 - <a target="_blank" rel="noopener" class="flex h-4.5 overflow-hidden rounded-xl px-2 text-[9px] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out" href="https://nextjs.org/docs/app/guides/caching">Next.js</a></li><li>axios를 쓰면? 대안은 <code>react</code>의 <code>cache</code> Next의 Request Memoization은 패치된 <code>fetch</code>에 붙는 최적화라서 axios에는 자동 적용되지 않습니다. 말씀하신대로 axios(또는 ORM/DB 클라이언트)를 써야 한다면, 해당 호출 함수를 <code>react</code>의 <code>cache</code>로 감싸면 비슷하게 “한 요청 내 중복 호출”을 최적화할 수 있습니다 참고 - <a target="_blank" rel="noopener" class="flex h-4.5 overflow-hidden rounded-xl px-2 text-[9px] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out" href="https://nextjs.org/docs/app/getting-started/fetching-data">Next.js</a></li></ul>

next Request Memoization과 react cache

답변이 늦었습니다 🙇‍♂ 우선 포인트 짚은 좋은 질문 주셔서 감사합니다. 답변 먼저 드릴게요 🤗<ul><li>가능합니다. “섹션 단위로만 실패 UI”를 띄우는 방법은 두 가지가 있어요.<ol><li>섹션 내부에서 에러를 ‘잡고’ 소프트-페일(fallback을 직접 렌더)</li><li>App Router의 세그먼트 단위 에러 바운더리를 활용(= <code>error.tsx</code>), 섹션을 Parallel Routes로 분리</li></ol></li></ul>말씀하신 방법 중에 error.tsx는 세그먼트 단위로 에러를 잡기에 추가적인 수정(라우팅 구조 관련)이 필요합니다. 우선 간단한 1번부터 자세히 설명드릴게요.<hr><h1 style="text-align: left">1) 섹션 내부에서 처리(Soft fail)</h1>Server Component 안에서 <code>fetch</code>를 직접 <code>try/catch</code>로 감싸고, 실패 시 그 섹션만 대체 UI를 조건부 렌더링 하는 방법입니다. <code>fetch</code>는 네트워크 오류에서만 throw하고, HTTP 에러는 <code>res.ok</code>로 판별할 수 있어요.<pre><code class="language-tsx">// SectionB.tsx (Server Component)
export default async function SectionB() {
 try {
 const res = await fetch(process.env.API_URL + '/b', { cache: 'no-store' });
 if (!res.ok) {
 // 섹션 전용 fallback
 return <SectionBFallback status={res.status} />;
 }
 const data = await res.json();
 return <SectionBView data={data} />;
 } catch (err) {
 // 네트워크/파싱 등 예외
 return <SectionBFallback />;
 }
}
</code></pre>이 방식은 A, C는 정상 렌더, B만 fallback이 됩니다. 서버 액션이 아니어도 문제없어요. (Next 공식 가이드도 렌더 이후 비동기/이벤트성 에러는 바운더리가 못 잡으니 직접 처리하라고 안내합니다. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/app/getting-started/error-handling?utm_source=chatgpt.com">Next.js</a>))장점: 구조 변경 없음. 단점: “던지는(throw) 에러”를 경계로 분리해서 다루는 건 아님(즉, 바운더리가 아니라 “조건부 렌더”).<hr><h1 style="text-align: left">2) 진짜 바운더리: Parallel Routes + <code>error.tsx</code></h1>Next.js는 세그먼트 단위로 에러 바운더리를 둡니다. 같은 URL 안에서도 Parallel Routes(@slot) 를 쓰면 각 슬롯에 개별 <code>error.tsx</code> 를 둘 수 있어요. B만 실패해도 B 슬롯만 에러 UI가 나옵니다. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/14/app/building-your-application/routing/error-handling?utm_source=chatgpt.com">Next.js</a>)예시 구조:<pre><code>app/dashboard/
 page.tsx // 전체 레이아웃에서 슬롯을 배치
 @a/page.tsx // SectionA
 @a/default.tsx
 @b/page.tsx // SectionB
 @b/error.tsx // B 전용 에러 UI
 @b/default.tsx
 @c/page.tsx // SectionC
 @c/default.tsx
</code></pre><code>page.tsx</code>(부모)에서 슬롯을 배치:<pre><code class="language-tsx">export default function Dashboard({
 a, b, c,
}: { a: React.ReactNode; b: React.ReactNode; c: React.ReactNode }) {
 return (
 <main className="grid gap-6">
 {a}
 {b} {/* B만 실패하면 여기만 error.tsx로 대체 */}
 {c}
 </main>
 );
}
</code></pre><code>@b/error.tsx</code>는 반드시 Client Component여야 하고, <code>reset()</code>으로 재시도 버튼을 만들 수 있습니다. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/14/app/building-your-application/routing/error-handling?utm_source=chatgpt.com">Next.js</a>)<pre><code class="language-tsx">'use client';

export default function Error({
 error,
 reset,
}: { error: Error & { digest?: string }, reset: () => void }) {
 return (
 <div>
 <h2>섹션 B에서 오류가 발생했습니다.</h2>
 <button onClick={() => reset()}>다시 시도</button>
 </div>
 );
}
</code></pre>장점: 진짜 “경계 격리”. 스트리밍 중에도 해당 슬롯만 대체 UI로 전환. 단점: 라우팅(폴더) 구조를 바꿔야 함.<blockquote>참고: 말씀해주신 것처럼, 일반적인 커스텀 <code><ErrorBoundary></code> 컴포넌트(react-error-boundary 등)를 JSX로 감싸는 것만으로는 서버 컴포넌트에서 던진 에러를 못 잡는 제약이 있습니다. App Router에선 세그먼트 <code>error.tsx</code> 를 두어야 안정적으로 잡혀요. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/vercel/next.js/issues/58754?utm_source=chatgpt.com">GitHub</a>)</blockquote><hr><h2 style="text-align: left">어떤 방식을 고를까?</h2><ul><li>빠른 적용/섹션별 단순 실패 처리 → 1) Soft fail (try/catch + 조건부 렌더)</li><li>스트리밍/격리/리트라이까지 갖춘 정석 분리 → 2) Parallel Routes + <code>error.tsx</code></li></ul>공식 문서 요약:<ul><li>에러 바운더리는 세그먼트 레벨에서 중첩 배치 가능(그 아래만 잡음), <code>error.tsx</code>는 클라이언트 컴포넌트여야 함. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/14/app/building-your-application/routing/error-handling?utm_source=chatgpt.com">Next.js</a>)</li><li>Parallel Routes는 각 슬롯별 독립 로딩/에러 상태를 제공. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/13/app/building-your-application/routing/parallel-routes?utm_source=chatgpt.com">Next.js</a>)</li></ul>지금 쓰고 계신 페이지 구조에 맞춰 해결책을 선택하실 수 있을거여요. 리팩터링 없이 Soft fail 패턴으로 우선 적용하거나, Parallel Routes로 분리하는 파일 구조를 적용하는 방식으로요.

next.js 서버fetch 에러 fallback ui 구현 방법

깊이있는 좋은 질문 주셔서 감사합니다. Next.js에서 필터가 많은 페이지를 구현할 때 서버 Fetch를 사용하는 것이 권장되는 이유는 서버 컴포넌트(RSC)의 장점인 초기 로드 시 빠른 응답과 낮은 클라이언트 번들 사이즈 때문입니다.그러나 질문하신 케이스처럼 필터가 많아 사용자가 빈번하게 데이터를 변경해야 할 경우에는 몇 가지 트레이드오프가 존재합니다.<hr><h2 style="text-align: left">1. 서버 Fetch (RSC + route.push/replace)</h2>서버 컴포넌트와 서버 Fetch를 사용할 경우 다음과 같은 장단점이 존재합니다:장점<ul><li>초기 페이지 로딩이 매우 빠르고, SEO에 유리합니다.</li><li>클라이언트 JS 번들 사이즈가 줄어들어 성능이 좋습니다.</li><li>상태 관리 복잡도가 현저히 낮아집니다. (상태 관리를 서버가 대신합니다)</li></ul>단점<ul><li>필터 옵션을 변경할 때마다 매번 서버로 요청을 보내야 합니다.</li><li>상태가 URL로 표현되기 때문에 <code>router.push</code> 또는 <code>router.replace</code>로 페이지가 다시 렌더링됩니다. 이는 페이지가 계속 새로 그려지는 느낌을 줍니다. (UX가 약간 투박할 수 있음)</li></ul>서버 Fetch 방식이 가장 적합한 경우는 필터가 상대적으로 자주 바뀌지 않고, URL 공유나 SEO가 중요한 상황입니다. 예: 이커머스 상품 페이지, 검색 결과 페이지 등(또한 revalidatePath 등으로 캐시를 무효화하는 방법도 있습니다 :))<hr><h2 style="text-align: left">2. 클라이언트 Fetch (React Query 등 클라이언트 상태 관리)</h2>필터 변경이 빈번한 경우 React Query와 같은 클라이언트 상태 관리 라이브러리를 사용하면 다음과 같은 특징이 있습니다.장점<ul><li>필터 변경 시 UI가 부드럽고 자연스럽습니다. UX가 더 뛰어납니다.</li><li>클라이언트에서 데이터를 캐싱해두고 빠르게 응답을 제공합니다.</li><li>페이지 전체가 아닌 필요한 부분만 리렌더링하므로 UX가 비교적 뛰어납니다.</li></ul>단점<ul><li>초기 JS 번들 사이즈가 늘어나고, 초기 로딩 속도는 서버 Fetch 대비 느려질 수 있습니다.</li><li>데이터가 클라이언트 상태와 서버 상태로 나뉘게 되므로 관리가 복잡해질 수 있습니다.</li><li>SEO 친화적이지 않을 수 있습니다. (데이터가 클라이언트에서 Fetch되므로)</li></ul>이 방식이 적합한 경우는 필터 변경이 매우 빈번하고, 실시간으로 부드럽게 변경되는 경험이 중요한 경우입니다. 예: 관리자 페이지, 대시보드, 인터랙티브 데이터 분석 페이지 등&nbsp;상황을 고려하셔서 적절한 기술을 사용하는게 가장 좋은 해결책인것 같습니다..!&nbsp;리액트 쿼리 동작은 혹시 searchParams 가 키값에 포함되어 있나요??만약 그렇다면 아래와 같은 과정을 생각해볼 수 있을것 같아요. 기본적으로 리액트 쿼리는 Query Key가 변경될 때 자동으로 다시 fetch를 수행합니다.<ul><li>사용자가 직접 URL을 <code>replaceState</code>를 이용해 변경해도, Next.js Router나 React Router와 같은 라우터에서 제공하는 훅들이 URL 상태를 계속 관찰하고 있으며, URL 상태가 변경되면 라우터 상태가 변경됩니다.</li><li>이로 인해 React Query 훅이 사용하는 queryKey(<code>searchParams</code> 등)가 변경되며, React Query가 변경을 감지하여 자동으로 fetch를 다시 요청합니다.</li><li>React Query는 기본적으로 Query Key가 달라지면 새로운 요청을 자동으로 수행합니다.</li></ul>결론적으로 React Query가 사용하는 상태가 URL 상태와 연결되어 있다면, URL만 변경해도 자동으로 fetch 요청이 발생하는 것으로 추측할 수 있어요 :)

필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??

이런 경우 문제 원인이 다양할 수 있어서요. 혹시 클라이언트 라우팅이 route segment 는 그대로이고, searchParams 가 바뀌는 형식일까요? (예를 들어 <code>/gift-item</code> -> <code>/gift-list</code> 의 이동이 아닌, <code>/gift-item?id=1</code> -> <code>/gift-item?id=2</code> 처럼요)만약 위와 같은 이동(searchParams 만 바뀜)이라면 template.tsx 도 리렌더링이 발생하지 않아서 여쭤봅니다 🙏

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유

동일한 의미가 맞습니다. (Page.tsx 컴포넌트도 마찬가지 입니다.) 정확하게 이해하신것 같아요..!다만, 강의에서 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야 한다라는 말의 맥락은 Page.tsx 와 접근 방법이 차이점이 있다는 뜻은 아니어요.그보다는 'layout 에선' searchParams 에 접근할 수 없다. 하지만, Page.tsx 에서는 prop 으로 searchParams 등의 값에 접근할 수 있어서요. 이러한 차이점(둘다 서버컴포넌트지만, Page.tsx 에서는 searchParams 에 접근 가능한데, layout 에서는 접근 불가)에 대해 말씀드리고 싶었어요. 질문에서 말씀주신 것처럼 'use client'를 사용해서 접근하는 방식은 둘다 가능하기에 차이가 없어서요. 잘 이해하신 것 같아요 🤗혹시 추가로 궁금하신 점 있으시면 편하게 알려주셔요.

Boaz

Bài viết