Next.js 렌더링

리액트 렌더링

유저가 요청하면 서버에서 빈껍데기가 만들어지고 브라우저에서는 빈 화면이 렌더링 됨.

그 이후 모든 자바스크립트 코드들이 번들링 되어 한번에 브라우저로 전달되고 브라우저에서 자바스크립트 코드들이 실행되어 내용이 렌더링되어 유저가 볼 수 있다.

이 모든 과정이 이루어지는데 걸린 시간을 FCP라고 함. 그리고 리액트는 FCP가 길다고 볼 수 있다. 대신 초기 접속 이후의 페이지 이동은 빠름!

 

FCP : 요청 시작부터 컨텐츠가 화면에 처음 나타나는데 걸린 시간

성능을 나타내는 데 중요한 시간

3초 이상 이탈률 32% 증가, 5초 이상 이탈률 90% 증가, 6초 이상 이탈률 106% 증가, 10초 이상 이탈률 123% 증가

 

Next.js의 사전 렌더링

유저가 요청하면 서버에서 자바스크립트 코드가 html로 렌더링 되어 브라우저로 전달되고 그것을 화면에 렌더링되어 유저가 볼 수 있다. 넥스트는 그래서 FCP가 리액트보다 짧다.

이때는 클릭이나 페이지 이동 등의 상호작용은 동작하지 않음.

그 이후, 자바스크립트 코드들이 번들링되어 브라우저가 전달받고 그걸 실행하며 html과 연결되어(hydration: 수화, 메말라있던 html요소들이 자바스크립트라는 물을 뿌려주는 것과 비슷함) 상호작용이 가능해진다.

이 모든 과정이 이루어지는데 걸린 시간을 TTI라고 함

 

TTI(Time To Interactive) : 요청으로부터 하이드레이션이 종료되는 과정까지의 시간

 

그 이후에 페이지 이동과 같은 요청은 CSR방식으로 처리함

Next.js의 사전 렌더링은 리액트 앱의 단점인 긴 FCP를 단축시키고 장점인 빠른 페이지 이동은 승계했다!