리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.
Next.js는 리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 Pre-rendering(각 페이지의 HTML을 미리 서버에서 생성)을 쉽게 할 수 있도록 도와주는 프레임워크이다.
리액트의 클라이언트 사이드 렌더링(CSR)은 웹 크롤러가 렌더링될 때까지 기다려주지 않아서 빈 HTML만이 수집되는데, Next.js는 이러한 점을 보완해 검색 엔진 최적화에 도움을 준다.
또, 초기 로딩 속도가 느린 CSR의 단점은 처음에 필요한 모든 자바스크립트를 불러오기 때문인데 이러한 단점을 Code Splitting을 통해 보완할 수 있다.
Next.js에서는 기본으로 서버 컴포넌트들에 대해 Code Splitting을 수행하고, streaming을 통해 점차적으로 서버에서 클라이언트로 UI 조각들을 보내준다.
클라이언트 컴포넌트에서는 dynamic import를 통해 Lazy Loading을 구현해 Code Splitting을 적용할 수 있다.
Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.
SSR은 서버에서 페이지를 렌더링하는 방식으로, 서버 측에서 웹 페이지의 내용을 생성해 클라이언트에 전달하는 방식을 말한다.
Next.js는 클라이언트에게 웹 페이지를 보내기 전에 서버에서 프리렌더링을 한 후 전송한다.
이 때에는 단순히 화면만 보여주는 HTML이고 JS요소는 없다.
그리고 나서 바로 리액트가 번들링된 JS코드들을 클라이언트에게 전송한다.
이렇게 리액트 코드들이 이전에 보내진 HTML DOM 요소 위에 한 번 더 렌더링되는 과정을 Hydrate라고 한다.
Hydration란 서버에서 렌더링된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트가 HTML 코드와 JavaScript 코드를 서로 매칭시키는 과정을 말한다.
