[TIL] Next.JS에서 제공하는 4가지 렌더링 기법

 

 

웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미한다.

이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라진다.

 

 

 

 

 

• Client - Side - Rendering (CSR) 

 

브라우저에서 JavaScript를 사용해서 웹페이지를 렌더링 하는 방식이다.

사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다.

렌더링의 주체는 클라이언트이다.

 

build 할 때만 fetch 되기에 한번에 모두 다운로드해서 서버부하가 적고 상호작용이 높다. 하지만 TTV(Time To View)가 길어서 검색 엔진 최적화(SEO)에 좋지 않다.

 

좋은 비유를 봤기에 참고해서 가져와보자면 CSR은 Server로부터 빈 그릇(빈 HTML)과 요리 재료(JavaScript)를 받고, 요리(렌더링)을 직접 하는 방식이다.

이것은 직접 요리하는 홈쿠킹과 비슷하다. 자유롭게 요리를 하지만 요리 실력(브라우저 성능)에 따라 결과가 달라질 수 있다.

 

동작과정 

1. 사용자가 웹사이트에 접속하면 서버는 빈 HTML과 JavaScript 파일을 보낸다.

2. 브라우저가 JavaScript를 로드하고 실행한다.

3. JS가 동적으로 HTML을 생성하고, 이를 브라우저에 표시한다.

4. 추가 페이지 요청 시, 전체 페이지를 다시 로드하는 대신 필요한 데이터만 서버에서 받아와서 해당 부분만 업데이트한다.

 

빠른 인터랙션을 제공하고, 부분 업데이트로 서버 부하가 감소하는 장점도 있지만 초기 로딩 속도가 느리고 SEO에 취약하다는 단점도 있다.

 

 

 

 

 

 

 

 

 

 

• Server-Side-Rendering(SSR)

 

서버에서 HTML을 완성해서 브라우저로 보내는 방식이다.

빌드 시점에 모든 페이지를 미리 생성해서 서버 부하를 줄여주고, 클라이언트가 요청 시 서버가 데이터를 전송해 리렌더링한다.

렌더링 시 매번 데이터를 갱신한다.

렌더링의 주체는 서버이다.

 

좋은 비유를 봤기에 참고해서 가져와보면 SSR은 서버에서 요리(웹페이지 렌더링)을 완성시킨 후에 그릇에 담아(완성된 HTML) 고객(유저)에게 제공하는 방식이다.

가게에서 요리사가 완성된 요리를 손님에게 제공하는 것이다.

 

 

동작과정 

1. 사용자가 웹사이트에 접속하면 서버에서 해당 페이지에 필요한 HTML을 생성함.

2. 서버는 생성된 HTML ==> 브라우저에게 보낸다.

3. 브라우저는 받은 HTML을 표시한다.

4. 추가 페이지 요청 시, 해당 페이지에 대한 HTML을 다시 서버에서 생성하여 보낸다.

 

빠른 초기 페이지 로딩과 SEO에 유리하지만 사용자의 각 요청에 대해 서버에서 렌더링으로 서버 부하 증가가 단점으로 뽑힌다. 

 

 

- 어디에 쓰일까?

사용자의 요청에 따라 페이지가 실시간으로 변경되어야하는 경우, 항상 최신 상태를 유지해야하는 웹 페이지에 제공한다.

예약 게시판, 주식 같이 실시가능로 변경되는 데이터를 다루는 웹사이트에 사용할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

• Static Site Generation (SSG)

 

빌드 시에 모든 페이지를 HTML로 미리 생성하는 방식이다.

최초 빌드 시에만 생성하기에 TTV가 매우 짧고, SEO에 유리하다. 서버에서 페이지를 렌더링해 클라이언트에게 HTML을 전달한다.

렌더링의 주체는 서버이다.

 

 

참고해서 가져와보면 미리 요리(웹페이지 렌더링)을 완성 시켜놓고, 동일한 요리를 계속 제공하는 방식이다.

이는 닭꼬치가게에서 튀긴 닭꼬치를 바로 판매하는 것과 비슷하다.

빠르지만 개인화된 요리 제공이 어렵다는 단점이 있다.

 

 

동작과정 

1. 빌드 시 서버는 모든 가능 요청에 대해 HTML을 미리 생성함

2. 사용자가 접속하면 서버는 미리 생성해 뒀던 HTML을 내보낸다.

3. 브라우저는 받은 HTML을 표시한다.

4. 추가 페이지 요청 시, 미리 생성해뒀던 페이지의 HTML을 내보낸다.

 

 

- 어디에 쓰일까?

자주 변경되지 않는 페이지에 적합하다.

예를 들어, 어바웃페이지, 제품 소개 같은 정보를 제공하는 사이트나 개인 블로그 같은 콘텐츠가 일정 시간 동안 고정되는 경우 사용한다.

 

 

 

 

 

 

 

 

 

• Incremental Static Regeneration (ISR)

 

빌드 시점에 페이지를 미리 생성하면서도 특정 시간 간격으로 설정한 주기마다 페이지를 다시 생성한다. 

SSG 확장으로 설정한 주기만큼 설정을 갱신한다.

필요에 따라 페이지를 재생성한다.

 

참고해서 가져와보면 필요에 따라 요리(웹페이지 렌더링)를 새로 하거나, 미리 만들어둔 음식을 제공하는 방식이다.

이는 닭꼬치가게와 레스토랑의 중간 형태로 대부분의 고객에게는 미리 만들어진 요리를 제공하되, 특별한 요구 사항이 있을 경우에 새로운 요리를 만들어 제공한다.

 

 

 

동작과정 

1. 빌드 시 웹 페이지를 정적으로 생성한다. Next.js에서는 getStaticProps와 revalidate 옵션을 이용해 페이지를 어떻게 /  언제 생성할지 설정할 수 있다.

2. 사용자가 접속하면 서버는 미리 생성해 뒀던 HTML을 내보낸다.

3. 브라우저는 받은 HTML을 표시한다.

4. 새로운 사용자의 요청이 들어왔을 때, revalidate 옵션에 설정된 시간이 경과하면, 해당 페이지를 서버에서 재생성함. 
이 때 사용자는 이전 페이지를 보고 있는데 그 이유는 설정된 시간이 경과되어도 새로운 요청이 없으면 재생성하지 않기 때문이다.  
새로운 요청이 있을 때에만 페이지가 재생성되고, 아니라면 이전의 페이지가 계속 보인다. 

 

 

- 어디에 쓰일까?

페이지에서 일부는 자주 업데이트되고, 다른 일부는 그렇지 않은 경우에 사용할 수 있다.

예를 들어, 사진관 사이트에서는 사진관 소개나 예약 약관 등의 페이지는 항상 유지되지만, 예약 하는 페이지에서는 자주 업데이트가 되야한다.