[2024.07.05] Next.js 14의 loading.tsx와 suspense

Next.js에서 데이터 로딩 상태를 표현하기 위한 방법으로 loading.tsx와 suspense를 적용해 보기로 했다. 

로딩화면

🍀 도입배경

Toss의 SLASH21의 '프론트엔드 웹 서비스에서 우아하기 비동기 처리하기'라는 세션을 보고 인상 깊은 내용이 있어 적용해보고자 했다. 로딩과 에러 상태를 매 페이지마다 useState나 useQuery문 등으로 관리하기에는 비효율적인 것 같아 부분적으로 Suspense와 ErrorBoundary를 사용하면 코드의 중복도 줄이고 로직도 이해하기 편해지지 않을까?라는 생각으로 개인 프로젝트 때 도입해 보았다.

시간 날 때마다 듣는 컨퍼런스

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

 

🔥 하지만 실패와 실패...

Next.js 14에는 클라이언트 사이드일 경우 로딩 상태를 감지하여 loading.tsx의 내용을 보여주는 내부 기능이 탑재되어 있다. 이를 통하여 클라이언트 사이드에서는 수월하게 로딩상태 구현이 가능했으나, 문제는 서버 사이드 렌더링을 할 때는 이미 서버에서 만들어서 보내기 때문에 감지하지 못한다는 것이다. 

실패 기록지와 성공

Next.js가 익숙하지 않았기에 일명 삽질(?)을 많이 했다. 특히 loading.tsx가 서버 컴포넌트인데, lottie 애니메이션을 사용하는 컴포넌트는 클라이언트 컴포넌트여서, 글씨는 잘 출력되는데 lottie 애니메이션이 출력되지 않는 현상이 참 많았다...

LoadingAnimation은 클라이언트 컴포넌트

 

 

💡 해결방법

이 문제로 거의 3일 동안 해결방법을 찾아 헤맸고, 최종적으로는 useSuspenseQuery와 dynamic의 조합으로 페이지 내부가 아닌, 외부에서 로딩상태를 처리할 수 있게 되었다.

dynamic 기능

공식문서를 통해 알게된 useSuspenseQuery

dynamic은 자체적으로 React.lazy()와 Suspense가 내장되어 있으며, useSuspenseQuery를 통해, Suspense 상태를 감지할 수 있게 해 주었다. 

 

🍀하지만 절반의 성공?

결국 외부에서 페이지나 컴포넌트들의 로딩상태를 관리할 수 있게 되었으나, 결과적으로 나중엔 하나하나 dynamic으로 컴포넌트들을 import 해야 한다는 번거로움도 있을 수 있으며 <Suspense></Suspense> 안에 넣어 직관적으로 '이 컴포넌트들은 Suspense가 적용되어 있구나'라는 인상은 주지 못했다. 좀 더 연구해서 꼭 가능하게끔 해보고 싶다. Suspense는 SSR에서 사용하지 못한다고 많은 블로그에서 본 것 같지만, 무언가 방법이 있지 않을까?

 

오랜만에 말끔하게 해결하지 못한 트러블슈팅이라 찜찜하지만, 나중에 보았을 땐 '그땐 왜 이것도 해결 못했나?'라는 생각이 들겠지 싶다.