next.js 서버fetch 에러 fallback ui 구현 방법
답변이 늦었습니다 🙇♂우선 포인트 짚은 좋은 질문 주셔서 감사합니다. 답변 먼저 드릴게요 🤗가능합니다. “섹션 단위로만 실패 UI”를 띄우는 방법은 두 가지가 있어요.섹션 내부에서 에러를 ‘잡고’ 소프트-페일(fallback을 직접 렌더)App Router의 세그먼트 단위 에러 바운더리를 활용(= error.tsx), 섹션을 Parallel Routes로 분리말씀하신 방법 중에 error.tsx는 세그먼트 단위로 에러를 잡기에 추가적인 수정(라우팅 구조 관련)이 필요합니다. 우선 간단한 1번부터 자세히 설명드릴게요.1) 섹션 내부에서 처리(Soft fail)Server Component 안에서 fetch를 직접 try/catch로 감싸고, 실패 시 그 섹션만 대체 UI를 조건부 렌더링 하는 방법입니다. fetch는 네트워크 오류에서만 throw하고, HTTP 에러는 res.ok로 판별할 수 있어요.// 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 ; } const data = await res.json(); return ; } catch (err) { // 네트워크/파싱 등 예외 return ; } } 이 방식은 A, C는 정상 렌더, B만 fallback이 됩니다. 서버 액션이 아니어도 문제없어요. (Next 공식 가이드도 렌더 이후 비동기/이벤트성 에러는 바운더리가 못 잡으니 직접 처리하라고 안내합니다. (Next.js))장점: 구조 변경 없음.단점: “던지는(throw) 에러”를 경계로 분리해서 다루는 건 아님(즉, 바운더리가 아니라 “조건부 렌더”).2) 진짜 바운더리: Parallel Routes + error.tsxNext.js는 세그먼트 단위로 에러 바운더리를 둡니다. 같은 URL 안에서도 Parallel Routes(@slot) 를 쓰면 각 슬롯에 개별 error.tsx 를 둘 수 있어요. B만 실패해도 B 슬롯만 에러 UI가 나옵니다. (Next.js)예시 구조: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 page.tsx(부모)에서 슬롯을 배치:export default function Dashboard({ a, b, c, }: { a: React.ReactNode; b: React.ReactNode; c: React.ReactNode }) { return ( {a} {b} {/* B만 실패하면 여기만 error.tsx로 대체 */} {c} ); } @b/error.tsx는 반드시 Client Component여야 하고, reset()으로 재시도 버튼을 만들 수 있습니다. (Next.js)'use client'; export default function Error({ error, reset, }: { error: Error & { digest?: string }, reset: () => void }) { return ( 섹션 B에서 오류가 발생했습니다. reset()}>다시 시도 ); } 장점: 진짜 “경계 격리”. 스트리밍 중에도 해당 슬롯만 대체 UI로 전환.단점: 라우팅(폴더) 구조를 바꿔야 함.참고: 말씀해주신 것처럼, 일반적인 커스텀 컴포넌트(react-error-boundary 등)를 JSX로 감싸는 것만으로는 서버 컴포넌트에서 던진 에러를 못 잡는 제약이 있습니다. App Router에선 세그먼트 error.tsx 를 두어야 안정적으로 잡혀요. (GitHub)어떤 방식을 고를까?빠른 적용/섹션별 단순 실패 처리 → 1) Soft fail (try/catch + 조건부 렌더)스트리밍/격리/리트라이까지 갖춘 정석 분리 → 2) Parallel Routes + error.tsx공식 문서 요약:에러 바운더리는 세그먼트 레벨에서 중첩 배치 가능(그 아래만 잡음), error.tsx는 클라이언트 컴포넌트여야 함. (Next.js)Parallel Routes는 각 슬롯별 독립 로딩/에러 상태를 제공. (Next.js)지금 쓰고 계신 페이지 구조에 맞춰 해결책을 선택하실 수 있을거여요. 리팩터링 없이 Soft fail 패턴으로 우선 적용하거나, Parallel Routes로 분리하는 파일 구조를 적용하는 방식으로요.
