hydration

프론트 단에서 데이터를 효율적으로 관리하는 것은 매우 중요하다.이를 위해 Cache를 흔히 활용한다. 이번에는 Next 에서 Cache를 효율적으로 활용하기 위해 공부해보자. Request Memoization 공식문서에 따르면 요청 url과 options가 같은 fetch api 에 대해서 자동으로 기억(memoize) 한다고 나와있다.   즉, 위 그림처럼 동일한 endpoint로의 API fetch가 여러 컴포넌트에서 수행된다면 Request memoization이 동작한다.따라서 API fetch 결과를 props drilling 하지 않고, 각 컴포넌트에서 fetch를 진행해도 실제 API 요청은 최초 1번만 시행된다. 다만, memoization은 서버에서 호출되는 GET 요청에 한해서 적용되..

CEOS 에서 진행하는 프로젝트를 이제 곧 시작하게 된다. 우리는 고민 끝에 Next 도입의 필요성을 느꼈고, Next와 이에 최적화 되어있는 TailwindCSS를 사용하기로 하였다. 왜 Next를 선택하였나? Next는 기본적으로 SSR(Server Side Rendering)에 최적화 되어있는 프레임워크라고 잘 알려져있다. CSR(Client Side Rendering) CSR은 우리가 흔히 알고있는 create-react-app 으로 쉽게 세팅할 수 있다. 위 사진은 CSR의 동작 방식을 나타낸다. 사용자가 페이지에 접속하면 클라이언트(브라우저)가 이를 인지하여 서버에 해당 데이터들(HTML, JS코드 등)을 요청한다. 브라우저가 데이터를 받게 되면 JS파일을 다운로드한 후 페이지를 보여준다. 모..