hydrationboundary (1) 썸네일형 리스트형 [성능 최적화] Next.js HydrationBoundary를 활용한 서버-클라이언트 데이터 최적화 Next.js 서버 컴포넌트와 Tanstack Query를 활용해 성능 최적화하는 방법에 대해 소개해보려고 합니다.서버 - 클라이언트 데이터 최적화 📖✨ Next.js의 서버 컴포넌트에서 데이터를 미리 패치해 클라이언트 컴포넌트로 넘겨준다면 초기 렌더링을 개선할 수 있습니다. ✨ 기존 코드기존에는 클라이언트 컴포넌트에서 `Tanstack Query`를 사용해 데이터를 패칭을 했습니다.const MainComponent = () => { const userId = useUserId(); const { data: tourismList, isPending isError } = useGetTourismListQuery(userId); ...} 리팩토링 코드`HydrationBoundary`와 `.. 이전 1 다음
