[Next.js] 기본 Loading UI 세팅하기

Loading UI는

Next.js 14의 App Router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능이다.

UX 향상을 위해 spinner를 사용하기도 하고, skeleton UI를 먼저 보여줌으로써 로딩 상태를 나타내

사용자에게 빈 화면만 보여주는 상황을 지양하는 것!

사용하는 이유 👀

1️⃣ 사용자 경험 개선

로딩 상태를 명확히 표시하여 사용자가 무슨 일이 일어나고 있는지 알 수 있게 해 준다. 이는 사용자의 불안감을 줄이고, 시스템이 응답하고 있음을 알리는 역할을 한다.

2️⃣ 사용자의 불필요한 행동 문제 해결

사용자에게 현재 상태를 제공하여 불필요한 클릭이나 페이지 이탈을 방지할 수 있다. 사용자 유지율을 높이고, 사이트에 대한 신뢰성을 향상시킬 수 있다.

3️⃣ SEO 향상 및 접근성:

로딩 UI는 페이지의 일부분이 빠르게 렌더링되어 SEO 성능을 향상시키고, 사용자가 페이지를 더 빠르게 접근할 수 있도록 해 준다.

---

loading.tsx 세팅하기

Next.js에서 기본 제공해주는 로딩 UI 기능을 이용해보자.

파일 경로

• App router 기준으로, src/app 위치에 바로 loading.tsx 파일을 생성하면 Root 경로에서 발생하는 지연에 대해 이 위치에 있는 로딩 UI를 표출시킨다.

• 경로별로 다른 loading UI를 설정하고 싶다면 각 경로에 맞게 loading.tsx 파일을 생성하면 된다.

import React from "react";

const Loading = () => {
  return <div>Loading...👀</div>;
};

export default Loading;

기존에 사용하던 loading 상태와 구분하기 위해서 👀 이모지를 붙여줬다.

그리고 3G 네트워크 환경에서 다수의 요청을 반복적으로 발생시켜 지연이 발생하도록 해 보았다.

세팅해 둔 기본 Loading UI가 잘 뜨는 것을 확인할 수 있다!
💪🐹