[NEXT.js 14] 2. loading.js & Suspense & streamed Response (세분화 로딩상태 관리)

 

loding.js (지연)

 

  1. 정의

 

  2. 참고예시

 

  3. 파일의 위치

 

  4. suspense & streamed Response를 이용한 세분화 로딩상태 관리

---

상세

  1. 정의

: loading.js 파일은  Suspense 기반의 즉각적인 로딩 상태를 생성할 수 있음.

- 기본적으로 Server side 이지만 'use client'; 를 주며 client side 로 사용될 수 있다.

 

=> Data를 호출하는 페이지에서 페이지의 새로고침을 할 때 지연(loading.js)시간을 두게 되면, 페이지가 깜빡이며 나타나게 된다.
=> 그러나, 서로 다른 페이지간의 이동에서는 깜빡임없이 페이지간 전환이 이뤄진다.
>> ★ 그 이유는, NEXT는 아주 강력한 캐싱을 하는데, 페이지에 첫 접속 때에 화면구성이며 데이터 등 모든 것을 캐싱한다.

 

---

  2. 참고예시

// loading.js

export default function Loading() {
  // Or a custom loading skeleton component
  return <p>Loading...</p>
}

 

- 파일명은 파일규칙상 loading.js 로 고정!

---

 

  3. 파일의 위치

case1) project/app/loading.js
=> 모든 페이지와 레이아웃에 적용되어 버림

case2) project/app/특정컴포넌트/loading.js
=> 특정 컴포넌트 페이지와 레이아웃에만 적용됨

---

 

  4. suspense & streamed Response를 이용한 세분화 로딩상태 관리

목적 : Data를 가져오는 부분을 분리된 컴포넌트로 아웃소싱

- 1) 분리시킨 컴포넌트를 React에 내장된 컴포넌트 <Suspense>로 래핑(wrapping) 할 수 있다.

 

<Suspense> : react 에서 제공해주는 컴포넌트, 일부 데이터 or 리소스가 불려질 때까지 로딩 상태를 처리하고 대체 컨텐츠를 표시.

 

// data 를 가져오는 컴포넌트를 새로 생성해준다
◼︎ async function Meals() { // 기본적으로 server 컴포넌트이기에 async 사용
◼︎  const meals = await getMeals(); // 그리고 data를 받을 준비

◼︎  return <MealsGrid meals={meals}/> // meals-item을 grid에 map으로 그리고 grid를 page에 표시할건데, 현재는 빈배열
◼︎ }

==> 이는 데이터를 불러오고 Promise를 반환해준다.
==> 위같은 컴포넌트가 suspense를 제동해서 로딩이 끝날 때까지 나머지 화면을 보여주고 태그내에 담긴 컴포넌트(loading 관련)는 보여주는 것이다.
==> ◼︎ 속성 : fallback={} 을 주면 되고, 그 사이에 컴포넌트를 넣어준다.  

export default async function MealsPage() {

  return (
    <>
      <header className={classes.header}>
        <h1>
          Delicious meals, created <span className={classes.highlight}>by you</span>
        </h1>
        <p>Choose your favorite recipe and cook it yourself. It is easy and fun</p>
        <p className={classes.cta}>
          <Link href="/meals/share">
            Share Your Favorite Recipe
          </Link>
        </p>
      </header>
      <main className={classes.main}>
◼︎        <Suspense fallback={<p className={classes.loading}>Fetching meals...</p>}>
          <Meals/>
◼︎        </Suspense>
      </main>
    </>
  );
}