더핑크퐁컴퍼니 기술 블로그 - Medium · 2025. 09. 26.
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
AI 엔지니어링 브리핑
Next.js App Router로 카페 서비스를 옮기면서 React Query의 사전 데이터 요청과 Suspense를 조합해 초기 화면과 데이터 로딩 경험을 개선하려 한 과정을 설명합니다.
문제 & 배경
- 문제 & 배경: 기존에는 인증 정보만 서버에서 미리 가져오고 게시판 데이터는 클라이언트에서 따로 불러와, 페이지가 복잡해질수록 서버 렌더링과 클라이언트 로딩 전략을 일관되게 정하기 어려웠습니다.
기술 & 해결책
- 기술 & 해결책: Next.js App Router와 React Query를 사용해 서버에서 필요한 데이터를 미리 요청하고, 클라이언트에서는 Suspense가 데이터가 준비될 때까지 자연스러운 로딩 화면을 보여주도록 구성했습니다.
교훈 & 주의점
- 교훈 & 주의점: 모든 데이터를 무조건 서버에서 가져오기보다 데이터의 중요도와 화면 경험을 기준으로 서버 사전 요청과 클라이언트 로딩 방식을 조합하고, 페이지별 전략을 일관되게 정하는 것이 중요합니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.