react query (2) 썸네일형 리스트형 [성능 최적화] Next.js HydrationBoundary를 활용한 서버-클라이언트 데이터 최적화 Next.js 서버 컴포넌트와 Tanstack Query를 활용해 성능 최적화하는 방법에 대해 소개해보려고 합니다.서버 - 클라이언트 데이터 최적화 📖✨ Next.js의 서버 컴포넌트에서 데이터를 미리 패치해 클라이언트 컴포넌트로 넘겨준다면 초기 렌더링을 개선할 수 있습니다. ✨ 기존 코드기존에는 클라이언트 컴포넌트에서 `Tanstack Query`를 사용해 데이터를 패칭을 했습니다.const MainComponent = () => { const userId = useUserId(); const { data: tourismList, isPending isError } = useGetTourismListQuery(userId); ...} 리팩토링 코드`HydrationBoundary`와 `.. TanStack Query 알아보기 1 (기본 사용법) TanStack Query 📖서버 상태를 관리하기 위한 라이브러리로 서버 상태를 페칭, 캐싱, 동기화, 업데이트하는 작업을 아주 쉽게 해 줍니다.주요 기능`데이터 캐싱`: 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상합니다.`자동 리페칭`: 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.`쿼리 무효화`: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있습니다. 사용 방법 📖설치yarn add @tanstack/react-query 적용할 범위에 Provider를 이용해 적용합니다.// main.jsximport ReactDOM from "react-dom/client";import App from "./App.jsx";import "./ind.. 이전 1 다음
