2. 에러와 로딩 처리

에러 핸들링

Nextjs에서는 예기치 않은 오류에 대한 처리로 error.tsx 또는 global-error.tsx 파일을 사용할 수 있다. 페이지에서 에러가 발생하게 되면 해당 파일의 UI가 보여지게 된다.

✨ Nextjs로 에러를 전달해야하기 때문에 컴포넌트에서 직접 try/catch로 에러를 처리하면 error.tsx가 작동하지 않는다.

 

루트 레이아웃과 동일한 경로에 error.tsx 파일을 생성하게 되면 예기치 않은 에러가 발생하면 루트 경로에 위치한 error.tsx 파일의 UI가 보여지게 된다.

 

만약 특정 경로에 에러 페이지를 다르게 보여주고 싶다면 해당 경로에 error.tsx파일을 따로 생성해주면 된다.

 

// page.js
export default function Home() {
  throw new Error("전역 에러 발생");

  return (
    <div>메인 페이지</div>
  );
}

// error.js
'use client'
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>에러 발생</div>
  )
}

 

✨ 에러는 서버 뿐 아니라 클라이언트 렌더링 시에도 발생할 수 있기 때문에 클라이언트 컴포넌트로 작성되어야 한다.

✨ 에러 컴포넌트 내부에서도 에러 발생 시 상위 error.tsx가 호출된다.

 

Props

error와 reset 2개의 props를 전달 받을 수 있다.

 

error는 Error 객체를 전달 받으며 message 속성에서 에러 메시지를 확인할 수 있다.

 

reset은 함수로 제공되며 함수를 호출 시 리렌더링 시도하게 된다. 에러가 일시적으로 발생한 것일 수 있기 때문에 사용자에게 다시 복구를 요청하도록 할때 사용된다.

 

 

로딩

loading.js 파일을 생성해서 리액트의 Suspense를 기반으로 하여 로딩 UI를 제공할 수 있다. 서버에서 해당 경로의 컨텐츠가 로드 되는 동안 로딩 페이지가 보여지게 되고 렌더링이 완료 되면 요청한 경로의 컨텐츠로 교체된다.

 

루트 경로에 loading.js 파일이 존재하는 경우 모든 경로에 대한 로딩 UI가 보여지게 되고, 특정 경로만을 위한 로딩을 추가하고 싶으면 해당 경로에 loading.js 파일을 생성하면 된다.

export default function Loading() {
  return <LoadingSkeleton />
}

 

로딩 상태일 때 루트레이아웃의 컨텐츠는 로딩에 포함되지 않고 즉시 보여진다. 이때 자식 레이아웃의 경우는 다르다. 만약 레이아웃 파일이 로딩 파일의 하위 디렉토리에 위치한다면 레이아웃 UI는 보여지지 않고 로딩화면으로 대체 된다. 같은 경로에 존재한다면 레이아웃은 즉시 보여지고 페이지 UI만 로딩으로 대체된다.

 

아래의 경우 loading.js와 layout.js가 동일한 위치라서 페이지 UI만 로딩으로 대체 된다.

ㄴapp
  ㄴtest
    ㄴlayout.js
    ㄴloading.js
    ㄴpage.js

 

아래의 경우에는 레이아웃 UI 또한 로딩으로 대체된다.

ㄴapp
  ㄴloading.js
  ㄴtest
    ㄴlayout.js
    ㄴpage.js

 

 

수동으로 Suspense 사용하기

SSR을 활용한 렌더링 시 데이터 로드가 완료 된 후에 HTML 렌더링이 시작된다. 그동안은 로딩 UI만 보여지게 된다. 일부 컨텐츠라도 미리 보여지게 되면 사용자경험을 좋게 만들 수 있는데 이를 수동으로 Suspense를 구현할 수 있다.

 

아래와 같이 수동으로 Suspense를 구성하면 해당 부분을 제외한 나머지가 먼저 렌더링 되어 사용자에게 보여지고, Board와 News는 각각 렌더링이 완료 되는 대로 화면에 보여지게 된다.

import { Suspense } from 'react'
import Board from './components/Board'
import News from './components/News'
import StaticContents from './components/StaticContents'
 
export default function Posts() {
  return (
    <section>
	    <StaticContents />
      <Suspense fallback={<p>Loading board...</p>}>
        <Board/>
      </Suspense>
      <Suspense fallback={<p>Loading news...</p>}>
        <News />
      </Suspense>
    </section>
  )
}