loading.js1 [Next.js] Next.js에서 Suspense 사용 1. Suspense란 무엇인가?React의 Suspense는 데이터가 준비될 때가지 기다리지 않고, 로딩 UI를 먼저 보여주는 기능전통적인 방식: 데이터가 다 준비될 때까지 화면이 “텅 빈 상태” → UX에 나쁨Suspense: 화면의 뼈대(레이아웃)는 먼저 보여주고, 데이터가 준비되면 그 부분만 채워 넣음 → UX 좋아짐즉, 로딩을 제어하는 React의 도구이다.Next.js와 Suspense의 관계Next.js는 기본적으로 서버 컴포넌트(Server Components) 기반이다.데이터 패칭은 서버에서 처리React의 Suspense와 결합 → 스트리밍 렌더링(Streaming Rendering) 가능※ 사용자는 페이지가 완전히 준비되기 전에 부분적으로라도 화면을 볼 수 있다!기본 사용 예시// a.. 2025. 9. 29. 이전 1 다음
