[Next.js] Loading 페이지

Loading 페이지

• 만약 API를 가져올때 너무 많은 시간이 소요된다면 페이지가 완성될때까지 사용자는 흰화면만 보게 됨
• 이럴때는 Loading 페이지를 시각적으로 사용자에게 보여줘야함
  • Loading페이지는 loading.tsx를 만들어주면 해결됨
  • 데이터를 가져오는 중이라면 먼저 loading 페이지를 사용자에게 보여주고
  • loading이 완료되면 page를 사용자에게 보여주게 될 것임.
  • Next.js는 기본적으로 layout을 사용자에게 보여주고 loading상태에 따라 loading컴포넌트를 loading이 완료되면 page컴포넌트를 사용자에게 보여주게 되는 것임.

💡 단, 데이터를 가져오는 부분은 직접 구현해줘야 한다 React Query의 isPending을 이용해 Loading 컴포넌트 보여주는 방식으로 구현해주는 방식으로 해야함