728x90
반응형
SMALL
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>
</>
);
}
728x90
반응형
LIST
'DEV > NextJS' 카테고리의 다른 글
[NEXT.js 14] 4. Font 바꾸기 (0) | 2024.06.17 |
---|---|
[NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css) (0) | 2024.06.14 |
[NEXT.js 14] 1. Image 태그 관련 <Image> (0) | 2024.06.11 |
[Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법 (0) | 2023.09.27 |
[Next.js 13] tailwind css Plugin 작성 & 적용 (0) | 2023.09.27 |
댓글