Next의 loading.tsx와 error.tsx with Suspense

loading.tsx와 error.tsx

• loading.tsx, error.tsx 파일을 만들어두면
  • 로딩 중에는 loading.tsx가 보이고, 에러가 발생하면 error.tsx가 보이게 할 수 있다.
• React의 Suspense와 error boundary를 이용하여 구현할 수 있다.
• Next의 Loading UI and Streaming 공식 문서 
  
  • https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Routing: Loading UI and Streaming | Next.js

Suspense란?

• 리액트 Suspense 공식 문서
  • https://react-ko.dev/reference/react/Suspense
• Suspense는 로딩이 끝나기 전까지 fallback을 보여주는 컴포넌트이다.
• Suspense가 로딩중인지 파악하는 방법
  1. next 같은 것에서 데이터를 fetching 할 때
  2. lazy를 사용할 때
  3. use라는 hooks로 데이터를 가져올 때
     • use hooks에는 Context나 Promise를 넣을 수 있다.
     • Promise를 넣으면 resolve 될 때까지 기다려준다.
     • context를 넣으면 useContext를 사용하는 것과 비슷하기에 use를 사용하지 않아도 됨
     • use는 기존 hooks와 다르게 if나 try문에도 들어갈 수 있다.

---

error.tsx

"use client"; // Error components must be Client Components

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

• 공식 문서에 나와있는 에러처리 예시를 error.tsx에 넣어줌

loading.tsx

import styles from "./home.module.css";

export default function Loading() {
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <svg
        className={styles.loader}
        height="100%"
        viewBox="0 0 32 32"
        width={40}
      >
        <circle
          cx="16"
          cy="16"
          fill="none"
          r="14"
          strokeWidth="4"
          style={{ stroke: "rgb(29, 155, 240)", opacity: 0.2 }}
        ></circle>
        <circle
          cx="16"
          cy="16"
          fill="none"
          r="14"
          strokeWidth="4"
          style={{
            stroke: "rgb(29, 155, 240)",
            strokeDasharray: 80,
            strokeDashoffset: 60,
          }}
        ></circle>
      </svg>
    </div>
  );
}

• 빙글빙글 도는 로딩 인디케이터
• next에서는 완전 처음 페이지에 접근할 때 페이지를 만들어서 보내주니까 로딩 인디케이터가 안 뜨고, 다음 페이지로 이동할 때부터 로딩 인디케이터가 뜬다.
  • 활용법
    1. ReactQeury의 prefetch를 사용하면 ssr이 적용되는데, 로딩 인디케이터는 사용하지 못함
    2. prefetch를 사용하지 않으면 검색엔진에 잡히지 않아 ssr이 안되는데, 로딩 인디케이터 사용이 가능(메타 데이터를 사용하면 ssr 사용 가능)

Loading.tsx를 활용하여 로딩 인디케이터를 적용하는 방법

ReactQuery를 사용한다는 기준으로 로딩 인디케이터를 적용시키는 방법으로는 3가지가 있다.

 

1. page.tsx -> loading.tsx
   • 즉, 페이지 전체에서 로딩이 걸리는 건 Next가 자동으로 loading.tsx를 보여준다.
2. 서버 Suspense -> fallback
   • Suspense를 활용하여 페이지 전체가 아니라 로딩이 필요한 부분의 컴포넌트에 로딩 인디케이터가 보이게 하는 것이 중요하다.
     • Next에서 layout 같은 부분은 제일 먼저 전송해 주기 때문에 이 부분을 제외한 다른 로딩이 필요하지 않은 부분은 빨리 보여주는 것이 좋다.
   • Susepnse를 사용할 때 주의점
     
     • Suspense는 항상 위에 둬야 한다.
     • 아래 사진처럼 Suspense를 TabDeciderSuspense 컴포넌트 안에 넣으면 안 된다.

3. ReactQeury -> isPending

• isPending은 데이터도 없는 완전 처음에 true
• 데이터를 가져오면 isFetching이 true
• 따라서 isLoading은 (isPending && isFetching)
• isPending을 사용하지 않는 방법
  • useQeury나 useInfiniteQuery를 사용하지 않고, useSuspenseQuery, useSuspenseInfiniteQuery를 사용하면 Suspense가 로딩 중인 것을 인지하여 isPending을 사용하지 않아도 된다.

-출처

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

Next + React Query로 SNS 서비스 만들기 | 조현영 - 인프런