Next.js를 사용하면서 자주 듣게 되는 단어 중 하나가, Pre-rendering과 Hydration이다. Next.js와 관련된 오류를 접하면서 개념에 대해서 모호하다보니 오류를 해결하기가 어려웠는데 이번에 좀 더 알게된 겸해서 정리해본다.
Pre-rendering
Next.js는 기본적으로 모든 페이지를 pre-rendering 즉, HTML을 미리 생성해서 준다. 아래 이미지를 보면 이해가 더 빨리 가능하다.
React.js 사용 시 (Client Side Rendering)
초기 로드 시에, 빈 화면이 나온다.
Next.js 사용 시 (Server Side Rendering)
미리 생성한 HTML 파일을 초기 로드 시에도 표시한다.
이를 보면 알 수 있듯, SSR로 생성된 HTML은 해당 페이지에 필요한 최소한의 JS코드로 되어있으며, JS파일을 서버로부터 모두 받아오게 되면 페이지를 완벽히 인터렉티브하게 만든다.
이 JS 파일을 서버로부터 모두 가져와 동적인 페이지를 만들게 되는 과정을 Hydration이라고 한다.
25% Speciallist