104%

서론 프로젝트를 진행하다가 삽질한 내용을 공유합니다. Next.js에서는 getInitialProps라는 메소드가 있습니다. 이 메소드를 사용하면 화면이 렌더링 되기 전에 필요한 데이터를 미리 준비해 놓을 수 있습니다. getInitialProps는 다음과 같은 상황에서 트리거 됩니다. 1. 주소창에 직접 URL을 치고 들어온 경우 SSR(Server Side Rendering)이 일어납니다. 이때 getInitialProps가 실행됩니다. 2. next/link나 next/router를 사용해서 클라이언트 사이드 라우팅(CSR)을 한 경우. 이 경우에도 getInitialProps가 실행됩니다. 이슈 제가 만들고 있는 프로젝트는 SNS라서 메인페이지에 진입했을때 피드의 리스트가 쭉 출력되어야 합니다. ..

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