HydrationBoundary 사용 이유와 동작 원리를 파악해보자
·
TIL
tanstack query의 PrefetchBoundary를 프로젝트에 적용하며 prefetch의 동작 원리가 궁금해져소심하게나마 다이브 해봤습니다. 프로젝트 구성 환경Next.js 14(app router), React 18, TypeScript, Tanstack-Query 5, mantine.css, module.css클라이언트에서의 네트워크 요청은 TTFB 개선이 어려웠다.클라이언트 컴포넌트에서만 query fetch해도 되잖아?라고 물을 수도 있겠지만클라이언트에서의 네트워크 요청에 따른 페이지 로드 시간 감소를 이번 프로젝트의 팀 목표로 설정했거든요.목표를 충족시키기 위해선 prefetch로 진행하는 방법이 필요했습니다.기본 fetch 대신 TanStack Query를 활용한 prefetch를 사..