Loading UI 사용방법
Loading UI가 들어가길 원하는 페이지와 같은 위치에 loading.tsx를 만든다.
// 함수명은 상관없음
export default function ProductsLoading() {
return <p>로딩중 입니다.... </p>;
}
JavaScript
복사
SSR의 경우, Loading 이 의미가 있지만,
SSG의 경우, Loading UI가 의미가 없다.
[참고 : Next JS에서 제공하는 yarn dev의 경우, 강제로 SSR로 실행되게끔 빌드가 된다.]
Loading UI 동작 원리
Loading UI는 React Suspense 를 사용한다.
•
loading.tsx 를 생성 한다.
•
layout에 있는 Page 컴포넌트를 Suspense Loading으로 감싼다.
Loading UI 한계
•
경로내에 페이지 컴포넌트를 크게 감싸기 때문에 중첩 Suspense 구현이 안됌.
•
이를 위해서 page 컴포넌트에 내용을 작은 단위로 분리하여 직접 Suspense API 를 사용하면 됌.
// 예시
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
export default function Posts() {
return (
<section>
<Suspense fallback={<p>Loading feed...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>Loading weather...</p>}>
<Weather />
</Suspense>
</section>
)
}
JavaScript
복사