104%

서론 이 글은 SSR 프레임워크인 Next.js를 커스텀해서 성능을 향상시킨 라이브러리를 구현한 내용을 담은 글을 요약, 번역한것입니다. 이해를 돕기 위해 많은 의역이 들어갈 수 있으니 참고해주세요. 웹에서의 성능 고성능을 유지하려면 클라이언트에게 적은 양의 코드를 보내야 한다. 우리는 우리가 hydrate해야 하는(static 하지 않고 유저와 상호작용 해야 하는 리액트 컴포넌트) 컴포넌트만 클라이언트에게 보내는 방식으로 성능을 끌어올렸다. 나머지 부분은 서버에서 렌더링한 그대로 놔둔다. The Cost Of JavaScript In 2018 위 내용에서 가장 중요한것은 다음과 같다. 자바스크립트의 비용은 로드할때 뿐만아니라, 파싱하고 실행하는것까지 포함된다. 우리가 최적화 하려고 하는것은 클라이언트에..

hydration = 수화 수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자. 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다. ReactDOM.render(element, container[, callback]) 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번쨰 인자로 전달된 콜백이 실행되게 할 수 있다. 즉 ReactDom의 render메소드는 컴포넌트를 렌더링한 후에..