로딩 컴포넌트

1. 로딩 컴포넌트, loading.tsx

 

 서버 컴포넌트에서 렌더링되기까지 시간이 매우 오래 걸리는 경우도 있을 수 있다.

 

async function getMovies() {
  await new Promise((resolve) => setTimeout(resolve, 5000)); // 5초 추가
  const response = await fetch(process.env.MOVIES);
  const json = await response.json();
  return json;
}

 

 

getMovies의 코드에 5초정도 추가로 시간이 걸리게 코드를 한 줄 추가하였다. 이런 식으로 렌더링되기까지 시간이 오래 걸릴 경우에는 아래의 움짤처럼 동작하게 된다.

 

 

사용자는 뭐가 뭔지도 모르는 상황이 되어 버린다. 그렇기에 로딩 중이라는 것을 보여줄 무언가가 필요한데, 이는 Next.js에서 매우 쉽게 추가해줄 수 있다. 바로 page.tsx(page.jsx)와 같은 위치에 loading.tsx(loading.jsx)라는 이름의 컴포넌트를 추가해주기만 하면 된다.

 

export default function Loading() {
  return <h2>Loading...</h2>;
}

 

 예를 들어, page.tsx와 같은 위치에 이런 loading.tsx 파일을 추가할 경우, 아래처럼 로딩 중임을 보여줄 수 있다.

 

 

 

2. Next.js의 loading.tsx와 Streaming

 

 Next.js는 특정 page.tsx와 같은 페이지에 loading.tsx 파일을 추가하면 해당 페이지가 데이터를 불러오는 동안 로딩 상태를 사용자에게 보여줄 수 있는데, 이는 Stremaing 기능과 연관이 있다.

• loading.tsx 파일: 페이지가 데이터를 비동기로 로드하는 동안 표시할 로딩 UI를 정의한다. Next.js는 데이터를 모두 받아오기 전에 loading.tsx에 정의된 내용을 먼저 렌더링하여 사용자가 즉시 피드백을 받을 수 있게 한다.
• Streaming: Next.js의 Streaming 기능을 통해, 서버는 데이터를 점진적으로 클라이언트에 전송하고, 클라이언트는 데이터를 모두 받기 전에 중요한 콘텐츠부터 순차적으로 렌더링한다. 이로 인해 페이지 로딩 속도가 크게 개선된다.