Next.js 의 렌더링 과정에 대하여

안녕하세요. 루루개발자입니다.

 

최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다.

 

Next.js 렌더링 과정

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 요소에 이벤트 리스너를 적용하고 렌더링을 진행합니다.

 

 

정리하면서 생긴 궁금점

정리하면서 생긴 궁금점에 대해서도 정리해보겠습니다. (??)

 

최초 렌더링 되고 그 이후에 클라이언트에서 페이지 변경시에도 서버에서 Pre-Rendering 과정이 일어나는가?

 

useRouter 를 사용하여 router.push 으로 페이지를 변경했을 경우에는 CSR 방식으로 렌더링 되어 서버측의 Pre-Rendering 과정은 일어나지 않습니다. 즉 서버 측에서 Pre-Rendering 이 진행되는 케이스는 다음과 같이 말해볼 수 있을 것 같습니다.

• javascript 에서 location.href 으로 페이지를 이동했을 경우
• html 에서 a 태그의 href 으로 페이지를 이동했을 경우
• 브라우저 주소창에 url 을 입력하여 해당 페이지에 접근 했을 경우
• 새로고침 했을 경우

 

그럼 Next.js 는 요청이 올 때마다 해당 페이지에 대한 html 문서를 Pre-Rendering 하는가?

 

이것에 대해 알아보니 Pre-Rendering 에도 여러가지 옵션이 있었습니다.

 

Static Generation (SSG)

모든 페이지에 대한 html 문서를 빌드할 때 생성하고 요청이 올 때마다 빌드할 때 만들어둔 html 문서를 재활용하는 방식입니다. 그렇기 때문에 SSR 방식이면서 빠르게 클라이언트에게 응답할 수 있다는 특징이 있습니다. 하지만 매 요청마다 페이지에 대한 내용이 변경되어야 하는 경우라면 적합하지 않을 수 있습니다.

 

Server Side Rendering (SSR)

매 요청마다 페이지에 대한 html 문서를 렌더링하여 클라이언트에게 전달하는 방식입니다. getServerSideProps 함수를 정의하면 해당 페이지는 항상 매 요청마다 html 문서를 Pre-Rendering 하게 됩니다.

 

Next.js 공식문서에서는 Static Generation (SSG) 방식을 권장하고 있었습니다.

 

출처

https://helloinyong.tistory.com/315

https://fourwingsy.medium.com/next-js-hydration-스타일-이슈-피해가기-988ce0d939e7

https://www.howdy-mj.me/next/hydrate

https://velog.io/@hoho_0815/Next.js-Pre-Render

https://ahnanne.tistory.com/75