[NextJS - 6] Rendering ( Next.js의 꽃, pre-rendering )

Next.js 에서는 자기들의 가장 중요한 컨셉중 하나로 Pre-rendering 을 꼽고 있다.
이 포스트에서는 Pre-rendering이 무엇인지, 그리고 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다.

React에서 작성한 코드를 UI의 HTML코드로 변환하는 중요한 작업단위를 Rendering이라고 한다. 
이 글에서는 이러한 Rendering의 종류와 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다.

 

---

 

What is Rendering?

렌더링이란 무엇일까?

렌더링이란, 작성된 코드를 유저가 상호작용할 수 있는 페이지로 변화시키는 과정을 의미한다.  

 

 

---

렌더링의 분류

Next.js를 통해서는 다음의 3가지 방식의 렌더링이 가능하다. 

• Server-Side Rendering(SSR)
• Static Site Generation
• Client-Side Rendering(CSR)

 

Pre-Rendering

먼저, Next.js에서 Key-Concept이라고 하는 Pre-Rendering에 대해 먼저 알아보자. 

Pre-Rendering에서 "Pre" 라는 것은 "미리" 를 의미한다. 
즉, Client쪽으로 넘겨주기 전에 "미리" 서버쪽에서 렌더링을 한 뒤 Client에 넘겨주는 것을 의미한다. 

 

그리고 Next.js 에서는 기본적으로 모든 페이지를 pre-render 한다. 
다시 말해 Next.js는 클라이언트 측에서 JavaScipt 부분 까지 모두 다운받아 실행하는 것을 기다리는 대신,
각 페이지의 HTML을 미리 서버쪽에서 만든다는 것이다. 

그리고 이러한 Pre-rendering 방식은,
퍼포먼스 측면이나 SEO(Search Engine Optimization, 검색엔진 최적화)측면에서 나은 결과를 나을 수 있으며, 
SSR과 Static Site Generation 방식이 Pre-rendering방식에 해당하게 된다.

 

 

말로만 설명하면 그 개념이 헷갈릴 수 있으니, 아래의 사진을 통해 SSR방식과 CSR방식을 비교하며 이해해보자. 

 

 

---

SSR

SSR 설명

위 그림은 Pre-Rendering방식 중 하나인 SSR의 작동 방식에 대해 설명하고 있으며, 그 일련의 과정은 아래와 같다.

1. User가 해당 페이지에 접속하려고 request를 보내게 되면,
2. 서버쪽에서는 "Ready to Render HTML" 파일을 만들어 client에게 보내준다.
   (Ready to Render HTML 은 그 즉시 render가능한 파일을 의미한다.)
3. 받아온 Ready to Render HTML 파일을 브라우저에서 먼저 보여준다.(이때 users는 바로 화면을 볼 수 있다, now Visible! )
4. Browser는 JS 파일을 다운 받는다.
5. 다운이 받아지는 동안, 유저는 화면을 볼 수는 있지만 조작 할 수는 없다. 이때 브라우저는 유저의 조작을 기억하고 있는다.
6. 다운이 완료되면 JS 프레임 워크를 실행한다.(이때 user는 화면을 조작 할 수 있다, Now Interactive!)
7. 기억 했던 user의 조작을 실행 시킨다.

 

 

즉, User의 매 요청마다 서버는 렌더가 가능한 HTML파일을 미리 만들어 클라이언트 쪽으로 보내주어, 클라이언트는 빈화면을 볼 필요가 없는 방식을 의미한다. 

 

 

---

 

CSR

CSR 설명

위 이미지는 CSR의 작동원리는 간단하게 보여주고 있으며, 그 일련의 과정은 아래와 같다. 

1. User가 해당 웹페이지에 접속하고, request를 보내게 되면
2. CDN이 HTML파일과 JS파일로 접근 가능한 링크를 Client쪽으로 보낸다. 
   (CDN(Contents Delivery Network)이란, HTML파일이나 Image와 같은 Static한 파일들을 저장해 놓는 곳으로
   End-User가 요청을 보내게 되면 지리적으로 가장 가까운 CDN이 cached된 결과로 응답을 하게 된다.)
   
   
3. Browser는 HTML과 JS를 다운 받는다. (다운로드가 완료 될 때 까지 화면은 보여지지 않는다.)
4. 다운로드가 완료된 JS가 실행되고, 필요한 data를 받아오기 위한 API들이 호출된다.(이때 place-holder들이 화면에 보여진다.)
5. Server가 Client의 요청에 응답하고,
6. Client는 받아온 Data를 place-holder위치에 넣어준다. (Now Interactive!)

 

 

즉, CSR의 경우 서버에서 렌더링에 대한 처리 없이 Client에 바로 보내주기 때문에, 
Browser가 JS를 모두 다운로드하고 실행이 완료될 때 까지 사용자가 볼 수 있는 것이 없다는 것이다. 

 

 

 

---

 

 

SSR(Server Side Rendering) vs Static Site Generation ?

그래, 이제 대충 서버쪽에서 먼저 렌더링 해서 보내주는 방식인 Pre-Rendering과 Client쪽에서 렌더링을 하는 CSR의 차이는 알겠다. 

그렇다면 같은 Pre-Rendering방식이라고 하는 SSR과 Static Site Generation은 어떤 차이가 있으며, 어떤 방식을 사용해야 할까?

 

 

Server-Side Rendering(SSR)

SSR 방식을 이용하게 되면,

Server는 요청되는 page의 HTML파일은 매 요청(request)마다 생성하게 된다. 
이때 생성된 HTML파일, JSON data, JavaScript Instruction이 클라이언트 쪽으로 보내지게 된다. 

Client는 응답받은 HTML파일을 이용해 먼저 정적인 페이지를 보여주는 와중, JSON 데이터와 JS instruction을 이용해, 해당 페이지를 Interactive하게(e.g. 버튼 이벤트 핸들러, etc.) 만든다. 그리고 이 과정을 hydration이라고 한다.

 

---

FYI, 
Hydration이란?
Next.js의 공식 홈페이지를 보다 보면 hydration이라는 용어가 자주 사용되는 것을 볼 수 있다. 
hydration은 사전적 의미로는 몸에 수분을 공급 하는 것을 의미하는데, React, Next.js에서는 다운로드 받은 JS파일과 받아온 JSON파일들로 화면이 Interactive하게 만드는 Process를 만든다. 

쉽게 말해 브라우저(몸)에 JS파일(수분공급)을 실행시켜, Interactive하게 만드는 과정이라는 것이다.

---

 

Static Site Generation

Static Site Generation 역시, HTML파일을 서버쪽에서 미리 만들어 보내준다는 점에서는 SSR과 같다. 
하지만, SSR은 runtime에 매 요청마다 새로운 HTML 파일을 만들어 응답해줬던 것과는 달리, 
Static Site Generation은 build time에 한번 HTML을 만들어 CDN에 저장해 놓고, 이를 user's request가 올때마다 재 사용한다. 

참고로, Next.js에서는 세가지 방식모두 개발자가 선택 가능하도록 하고 있지만,
다음과 같이 말하며 Static Site Generation방식을 가장 추천한다고 하고 있다. 

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

 

Next.js에서는 Static Site Generation Rendering방식을 추천한다고 하면서도, 
각 페이지마다 개발자가 3가지 방식 중 원하는 방식을 선택 할 수 있으며 어떠한 방식이 가장 알맞은지에 대한 지침또한 제공하고 있다.
(Rendering 방식 선택에 대한 참고링크 - data fetching docs.)

 

---

지금까지 Rendering이 무엇인지, 그리고 어떠한 Rendering방식들이 있는지,
그리고 Next.js에서는 어떠한 방식을 추천하고 있는지에 대해 알아봤다. 

 

다음 포스트에서는 배포 이후, 코드를 저장하거나 실행 할 수 있는 네트워크 위치(The Edge)에 대해 얘기를 해보겠다.