사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기

js App Router 환경에서 React Server Components(RSC)와 TanStack Query를 결합하여 페이지 렌더링 성능을 개선한 경험을 공유합니다. 특히, CSR 환경에서 발생할 수 있는 레이아웃 시프트 문제를 해결하기 위해 RSC를 도입하고, TanStack Query의 `useQuery` 훅이 클라이언트에서만 실행될 때 발생하는 `isLoading` 상태와 이로 인한 사용자 경험 저하 문제를 다룹니다.

이를 해결하기 위해 스트리밍 렌더링을 적용하고 LCP(Largest Contentful Paint)를 약 38% 개선한 과정을 상세히 설명하며, 사용자가 페이지 로딩을 인지하지 못하게 만드는 최적화 전략을 제시합니다. 전략을 제시합니다.