nextjs

Next.js 13 버전에서 ReactQuery 사용시 서버 컴포넌트에서 클라이언트 컴포넌트로 pre-fetch 데이터 전달하는 방법

Next.js 13 의 클라이언트 컴포넌트에서 react-query 를 사용하는 경우 서버 컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 것에 대한 게시물 입니다. 코드 예시의 라이브러리 버전은 아래와 같습니다. "@tanstack/react-query": "^4.24.4" "@tanstack/react-query-devtools": "^4.24.4", "next": "13.1.3", "react": "18.2.0", App 디렉토리의 서버컴포넌트에서 데이터를 미리 가져온 뒤 클라이언트 컴포넌트에 전달하는 방법이 2가지가 있습니다. 각각 차례대로 살펴보겠습니다. props drilling 방식으로 pre-fetch hydrate 방식으로 pre-fetch react-query Pro..