Next.js SSR + react-query 조합에서의 일반적인 페이지네이션 렌더링 방식

Question

안녕하세요, Next.js SSR + react-query hydration 조합으로 페이지네이션을 구현하려고 합니다.

핵심 궁금증은
일반적으로 SSR을 구성할 때, 첫 페이지만 SSR을 적용하고 2페이지부터는 CSR로만 돌아가게 하나요? 아니면 모든 페이지를 SSR로도 돌아갈 수 있게 구성을 하나요?

예컨대 커리어리 개발자 Q&A 메뉴는 첫 페이지만 SSR을 적용하고 2페이지(스크롤링)부터는 CSR로만 돌아가게 구성을 한 것 같습니다만, 사실 어떤 선택이든 Trade Off가 있겠으나 일반적으론 어떻게 구성하는지가 궁금하네요!

손정현 · Accepted Answer

안녕하세요!

질문해주신 부분은 요구사항과 상황에 따라서 달라지지 않을까 생각됩니다. 우선 커리어리의 많은 서비스들을 보시면 아시겠지만, 목록 형태의 컨텐츠는 대부분 무한 스크롤을 사용하고 있습니다. 이는 디자인 또는 비즈니스 관점에서 무한 스크롤 형태가 사용자에게 보다 자연스러운 탐색 경험을 제공해주기 때문에 채택된 것으로 알고있어요.

무한 스크롤 방식에서 모든 페이지의 데이터를 SSR로 페칭할수도 있겠지만, SSR에서 불러와야하는 데이터가 크면 클 수록 사용자가 처음에 기다리게 되는 시간도 크지 않을까 생각됩니다. 그래서 적절한 크기인 1페이지 분량만 SSR로 가져오게끔 설계된 것 같네요.

무한 스크롤이 아닌 일반적인 페이지네이션이라면 page를 query param으로 사용해서 필요한 페이지만 SSR에서 가져오는 형태로 구현을 할 수 있을 것 같네요. (일반적으로 이 방식을 많이 사용하는 것 같습니다)

무한 스크롤일 경우에는 보여줄 페이지만 SSR에서 가져오게되면, 막상 CSR에서 해당 페이지 이전의 데이터를 가져와야할 경우 어떻게 처리해야할지도 고민이 필요할 것 같네요.

그리고 react-query를 사용하실 경우, SSR에서 받은 데이터가 CSR에 저장된 캐시를 덮어 씌우지는 않는지도 주의가 필요하더라구요. 저희 같은 경우 SSR 프리페치 쿼리 키와 CSR에서 페칭할 때 쓰는 쿼리 키가 동일해서 SSR 로직이 돌 때, CSR에 이미 있던 캐시를 덮어 씌워서 의도치 않은 버그가 발생한 적이 있었습니다.

여담이지만 개인적으로 커리어리 개발자 Q&A 페이지에 SSR은 필요없다고 생각되고 해당 페이지에 페이지 재방문 시 스크롤 유지 같은 버그를 유발하기 쉬운 기능들이 탑재되어 있어서, 손봐야할 부분이 많은 상태입니다. 백로그에 있는데... 후 언제 처리해야할지 모르겠네요 :)