Hydrate

[Next.js] Next with React-Query

리액트에서 엄청 유용하고 매 프로젝트마다 사용했던 React-Query. React-Query는 아직도 가장 핫한 라이브러리라고 생각한다. React-Query를 통해 get과 post 방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 많은 기업들이 상태관리를 위해 도입하는 무척이나 매력적인 라이브러리라고 할 수 있다. 계속 강조하지만 Next.js를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽지만 React-Query의 hook의 경우 SSR이 아닌 CSR 방식으로 데이터를 가지고 온다. 이번 글에서는 React-Query의 데이터를 SSR로 사용할 수 있는 2가지 방식을 지원한다. 직접 데이터를 prefetch해와서 initialD..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..