Next.js
정적 랜더링과 서버 사이드 랜더링을 제공하는 React Framework다.
장점
서버사이드 렌더링
pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주고,
검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있다.
Hot reloading
개발 중 저장 되는 코드는 자동으로 새로고침 된다.
구성
_app.tsx
최초로 실행되는 것이 _app.tsx 인데,
_app.tsx 에서 렌더링 하는 값은 모든 페이지에 영향을 준다.
_document.tsx
meta태그를 정의하거나, 전체 페이지에 관련한 컴포넌트이다.
Next.js 렌더링 과정
Pre-Rendering
Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 한다.
서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여
페이지에 대한 html 문서를 문자열로 가져오는 것이다.
해당 html 문서에는 react 가 동작하여 필요한 js 파일들을 불러올 수 있도록 하는 최소한의 script 태그가 포함된 상태다.
클라이언트로 Pre-Rendering 한 html 문서 전달
Next.js 는 요청온 브라우저에게 Pre-Rendering 한 html 문서를 응답한다.
클라이언트에서 Rendering 시작
브라우저(클라이언트)는 서버 사이드에서 받은 html 문서를 화면에 렌더링하기 시작한다.
그리고 html 문서에 존재하는 script 태그에 명시된 js 파일을 로드하고 실행시킨다.
클라이언트에서는 ReactDOM.render 라는 함수를 이용하여 React Element 를 렌더링하고,
ReactDOM.hydrate 라는 함수를 이용하여 DOM 요소에 이벤트 리스너를 적용하고 렌더링을 진행한다.
댓글