Next.js 14) Suspense를 사용한 로딩 UI

 
난 웬만해서 next.js에서 서버 컴포넌트를 사용하여 데이터 패칭하는 것을 선호한다.
데이터 패칭 외에도 웬만해서 서버 컴포넌트를 유지하려고 하는 편이다.
그 이유는 당연히 프리렌더링 때문이다.
 
물론 계산 용량이 너무 크다면 서버에서 계산해도 프리렌더링이랑 상관없이 빈 화면이 보이게 되겠지만
웬만해선 프리렌더링이 데이터를 빠르게 가져와 보여주는데 유리하다는 생각이 들었다.
그런데 이런 상황에도 불가피하게 클라이언트 컴포넌트에서 데이터 패칭을 하는 경우가 생기지 않겠는가?
(나는 생기더라... 다른 사람들은 모르겠다)
 
나는 이런 경우에 클라이언트 컴포넌트에서 데이터 패칭이 되면 프리렌더링은 안 되겠지만
해당하는 부분만 Suspense 기능을 사용하여 로딩 화면이라도 보여주고자 하였다.
그래서 가장 최상위 LootLayout에 Suspense를 추가하고 fallback으로 Loading component를 넣어주었다.
Loading component는 app 디렉토리 바로 아래에 위치시켰다.
 

<Suspense fallback={<Loading />}></Suspense>

그런데 Suspense 컴포넌트나 loading.tsx가 가장 상위에 있으면 전역이 CSR로 동작하게 되더라.
Suspense 컴포넌트를 LootLayout에서 제외했음에도 loading.tsx가 계속 동작하여
나머지 프리렌더링을 하는 컴포넌트까지 집어삼켰다.
 
서버 컴포넌트에서 데이터를 가져와 프리랜더링 하면서 동시에 Suspense 기능을 사용하고 싶다면
필요한 클라이언트 컴포넌트에서 별도로 사용해야 한다.
 

<Suspense fallback={<p className="text-center">Loading....</p>}>