프리패칭이 권장되는 데이터
정적 데이터 (거의 변경되지 않는 데이터)
- 가게 기본 정보 (이름, 주소, 영업시간, 소개글)
- 메뉴 카테고리 목록
- 상품 상세 정보
- 설정 가능한 옵션 목록
준정적 데이터 (낮은 빈도로 변경되는 데이터)
- 가게 평점/리뷰 통계
- 주간 인기 메뉴
- 프로모션 정보
- 사용자 등급별 혜택 정보
- 메뉴 가격
프리패칭이 권장되는 이유
- 초기 로딩 성능 향상
- 서버에서 미리 데이터를 가져와 전달하므로 클라이언트 로딩 시간 단축
- 화면 깜빡임 없는 부드러운 렌더링
- 사용자가 느끼는 로딩 시간 최소화
- 서버 리소스 효율화
- 여러 클라이언트의 중복 요청 방지
- 서버 부하 감소
- 캐싱 효율 증가
- SEO 최적화
- 검색 엔진이 콘텐츠를 더 잘 인식
- 더 나은 검색 결과 노출
구현 구조 예시
📁 provider/ServerPrefetchProvider.tsx // 프리패칭 프로바이더
📁 hooks/queries/store/useGetStoreDetail.ts // 쿼리 훅
📁 app/store/[id]/page.tsx // 서버 컴포넌트
ServerPrefetchProvider 사용 예시
1. 서버 컴포넌트에서 사용