loading.tsx

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

Next.js 서버 컴포넌트를 활용한 데이터 페칭과 로딩 상태 관리

1. 서버 컴포넌트의 장점

• 보안성: 서버 컴포넌트에서 데이터를 페칭하면 코드가 클라이언트에 노출되지 않아 안전함. API 키 사용이나 데이터베이스 통신도 안전하게 수행 가능.
• 효율적인 데이터 처리: 백엔드에서 데이터를 페칭하고, 결과값을 클라이언트에 전달함으로써 효율적인 데이터 관리를 실현.

2. 데이터 페칭 시 문제점

• 로딩 시 UI 부재: 데이터 페칭에 시간이 걸리면 사용자는 아무것도 볼 수 없음. 백엔드에서 페칭이 완료될 때까지 렌더링 작업이 이루어지지 않아 사용자 경험이 저하됨.
• 사용자 경험 저하: 로딩 중에 표시할 UI가 없어 사용자에게 불편함을 초래함.

3. 로딩 상태 관리 해결 방안

• 로딩 컴포넌트 도입: loading.tsx 파일을 생성하여 데이터 페칭 중 로딩 상태를 사용자에게 보여주는 UI를 제공.
• 컴포넌트 구현: Loading 또는 LoadingPage라는 이름의 React 컴포넌트를 작성하고, 간단한 UI 요소(예: h2 태그)를 반환하도록 설정.
• 지연 시간 설정: 로딩 시간을 테스트하기 위해 페칭 함수를 의도적으로 지연시켜 로딩 상태를 확인.

4. Next.js의 스트리밍 기능 활용

• 부분 스트리밍: Next.js는 페이지의 일부(레이아웃, 네비게이션, 로딩 컴포넌트)를 즉시 스트리밍하여 사용자에게 보여줌.
• 자동 컴포넌트 교체: 데이터 페칭이 완료되면 로딩 컴포넌트를 실제 데이터 컴포넌트로 자동으로 교체함.
• 사용자 경험 향상: 사용자에게 즉각적인 피드백을 제공하여 로딩 시간을 효율적으로 관리함.

5. 파일 명명 및 위치의 중요성

• 파일 명명 규칙: loading.tsx 파일 이름과 위치가 중요함. 페이지 파일과 동일한 디렉토리에 위치시켜 해당 페이지에 대한 로딩 상태를 관리하도록 설정.
• 폴더별 로딩 관리: 특정 폴더(예: movies 폴더의 id 폴더)에 loading.tsx 파일을 넣으면 해당 폴더 내 페이지들에 대해 로딩 상태를 관리함.