Next.js는 회사에서도 사용해 왔었고, 이에 대한 개념이나 사용법에 있어 어느정도 알고 있다고 생각하였지만 내가 아직 적용해보지 못한 기능들이나 애매하게 알고 있던 개념들에 대해 정리를 하고자 한다.
Next.js의 사전렌더링(pre-rendering)
간단히 설명하면 브라우저의 요청에 의해 사전에 Next서버에서 렌더링이 완료된 HTML을 응답하는 렌더링 방식이다.
이는 기존 react라이브러리에서 동작하는 CSR의 단점인 초기 진입시 웹 사이트에 필요한 JS번들 파일을 전부 가져오는 요청으로 인한 렌더링 속도가 늦어질 수 있다는 단점을 효율적으로 해결하는 방식이다.
즉, FCP(First Contentful Pain)인 "요청 시작"을 기점으로 컨텐츠가 화면에 처음 나타나는데 걸리는 시간이 오래 걸리는 단점을 해결한 것이다.
물론 첫 페이지 진입 이후 페이지 이동은 클라이언트 내부에서 이미 다운로드한 JS번들 파일로 동작하기 때문에 페이지 이동이 빠르다는 점이 있다. Next.js는 반대로 매번 페이지를 요청할 것 같지만, 초기 렌더링 이후에 페이지 이동 요청을 보낼 때는 CSR방식으로 렌더링이 일어나기 때문에, JS번들 파일을 실행하여 컴포넌트를 교체하여 페이지를 이동하는 방식으로 동작하기 때문에 Next.js는 CSR의 단점을 커버하고 장점을 살린 동작방식을 가진다.
Next.js의 하이드레이션(Hydration)
여기서 추가적으로 Next.js 서버에서 렌더링된 HTML파일을 전송 후에, JS번들 파일을 전송하게 된다. 여기서 JS코드를 읽으며 컴포넌트들이 상호작용하게 하는 과정을 하이드레이션 과정이라고 한다. 이러한 과정이 들어가게 되는 것은, 일단 사용자에게 빠르게 컨텐츠를 보여주고(FCP 시간 단축) 그 후, JS로 동작할 수 있는 상호작용들을 할 수 있도록 동작시키는(TTI : Time To Interaction) 것이다
