[서버]SSR과 Static generation의 특징, CSR과의 차이점

NextJS 공식문서에 따르면,

NextJs는 랜더링 시 static generation과 server-side rendering이 두 가지 특성을 선택해서, 부분적으로 쓸 수 있다고 나온다. 

 

이 개념이 뭔지 간단하게 알아보자.

 

🍎server-side rendering

▶️이름으로 뜻 유추하기

- server(서버)-side(측면의) rendering(렌더링)

⇒ 서버에서 동적으로 페이지를 랜더링하는 것.

 

✅동적으로 생성한다는 건, 클라이언트 요청 시마다 완전한 html 전체를 새로 Rendering 된다는 것.

✅장점 :  동적인 Rendering을 통해 사용자에게 최신 데이터,동적인데이터를 바로바로 제공해줄 수 있다!

⏸️단점 : client side rendering보다 평균적으로 ui페이지 랜더링 완료시점이  빠르다고 하지만,

요청 시마다 전체 html을 불러오기 때문에, 이 역시도 서버 부하를 일으켜 렌더링 속도가 느려질 수 있다.

 

 

 

🍎static generation

▶️이름으로 뜻 유추하기

- static(정적)  generation(생성) ⇒ 프로그래밍 개념 Static은 ‘본격적인 실행 전에 이미 생성됨’이라는 뜻이기에 `미리 생성된다` 라는 개념임을 유추할 수 있다

 

✅js가 렌더링되기 전에 사전에 페이지를 빌드하여 Html파일을 ui에 먼저 제공.나머지 Js코드는 이후에 천천히 ui에 반영.

✅장점 : 상대적으로 JS보다 랜더링 시간이 적게 걸리는 html을 랜더링하기 때문에,

긴 로딩시간 없이 기본적인 UI를 랜더링 할 수 있음

⏸️단점 : 그러나 빌드 시점에 미리 HTml코드를 랜더링하기 때문에, Ssr처럼 동적인 데이터를 반영하기 힘듦.

 

 

 

SSR, static generatioN과 대비되는 개념

⬅️➡️🍎client -side-rendering

▶️이름으로 뜻 유추하기

client(클라이언트 ) -side(측면)-rendering(랜더링) ⇒ 서버가 아닌 클라이언트(브라우저)에서 랜더링 되는 방식.

 

✅서버에서는 아주 기본적인 html코드만 랜더링 하고,  서비스에서 필요한 주요데이터는 브라우저에서 추가로 요청하여 랜더링하는 방식.

✅장점 : 요청 시마다 랜더링하기 때문에 동적인 업데이트 가능

⏸️단점 : 상대적으로 html에 비해 렌더링 시간이 느린 JS를 대부분 랜더링하기 때문에, 브라우저 UI에 반영되기까지 오래걸림

• CSR의 대표 예시 : REACT create-react-app
  • CRA에서 대표적으로 쓰이는 렌더링 방식인데, root컴포넌트 등 HTML기본구조를 제외하고는 코드 대부분이 JS로 이루어져 있어서 랜더링과정의 대부분이 Js코드를 랜더링하는 것이 목적