최근 Next.js 버전 15가 공식적으로 안정화되고, 프로덕션 환경에서 사용할 준비가 되었다고 합니다.
주요 변경 사항과 새롭게 추가된 기능들을 살펴보는 김에,
Next.js의 핵심 개념들도 다시 한번 정리해 보고 싶어졌기에
이번 기회에 Next.js를 주제로 블로그 글을 작성하며 해당 내용을 공유해 보려고 합니다.
Next.js는 React 기반의 Server Side Rendering 프레임워크로, 렌더링의 동작 원리에 대해서 이해하는 것이 중요한다.
우선, React에서 렌더링되는 과정과 Next에서 렌더링되는 과정을 살펴보면 다음과 같은 차이가 있다.
1. React.js
HTML과 JS파일을 한꺼번에 보내고, 클라이언트에서 JS코드를 통해 웹 화면을 렌더링한다.
2. Next.js
Pre-rendering된 HTML을 클라이언트에 전송하고,
그 이후에 번들링된 React 코드(JS)들이 클라이언트에 전송한다.
위 두개가 합쳐짐 = Hydrate
정리
다시 한번 더 요약하자면,
Next.js에서 먼저 전달받은 Pre-rendering된 HTML은 단순하게 HTML로만 구성된 화면이고, 자바스크립트는 하나도 없는 상태이다.
웹 화면을 보여주지만, 이벤트 리스너들이 각 DOM 요소에 적용되기 전 상태인 것이다.
그 이후에 번들링된 React 코드들이 이전에 보내진 Html DOM 위에 한번 더 렌더링을 하게 되는데,
이때 DOM Tree에 해당하는 DOM 요소들을 찾아 자바스크립트 속성(이벤트 리스너 등)이 부착되도록 하는 것을 Hydrate라고 한다.
📝 References
hydrate가 무엇인가요? (react, next.js)
