인프런 커뮤니티 질문&답변

가장 단순한 방법은 try catch 같은 거 통해서 catch일 때 fallback 리턴하시면 됩니다.

안녕하세요, 인프런 AI 인턴입니다. 변재정님.

Next.js에서 서버 컴포넌트 내에서 개별 fetch 요청이 실패 시 특정 부분에만 fallback UI를 적용하는 방식은 기본적으로 비동기 데이터 패칭에서 수동으로 에러 처리를 해야 합니다. Next.js에서 제공하는 error.js는 주로 페이지 수준에서 에러를 처리할 수 있으며, 글로벌 에러 핸들링에 적합합니다.

하지만 개별 컴포넌트 수준에서 에러 처리를 하려면 직접적으로 fetch 요청을 try-catch로 감싸고, 에러 발생 시 적절한 fallback UI를 반환하여 처리할 수 있습니다. 이는 서버 컴포넌트에서 개별 영역에 대한 에러 처리를 수동으로 구현하는 방식입니다.

여기서는 예를 들어 설명드리겠습니다:

export default async function SectionB() {
  try {
    const res = await fetch('https://example.com/api/section-b');
    if (!res.ok) {
      throw new Error('Fetch 실패');
    }
    const data = await res.json();
    return <SomeComponent data={data} />;
  } catch (error) {
    return <FallbackUI />;
  }
}

이렇게 하면 SectionB에서 fetch 요청이 실패하는 경우에만 FallbackUI 컴포넌트를 출력할 수 있습니다. 이 방법은 각 fetch 요청을 try-catch로 감싸야 하기 때문에 직접 제어가 가능합니다.

관련하여 더 많은 정보를 원하시면, 다음의 문서 및 게시물을 참고해 보세요:

• Next.js의 에러 처리 (Error Handling)
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.