SSR(Server Side Rendering), CSR(Client Side Rendering)

MPA (Multi Page Application) ?

 - 새로운 페이지를 클라이언트에서 요청할 때 마다 서버로부터 정적 리소스(HTML)를 받아와

    해당 페이지 전체(HTML, IMAGE 등)를 새로 렌더링이 된다.

- SSR(Server Side Rendering) 

 

SPA (Singgle Page Application) ?

  - 브라우저에 최초 한번 페이지 전체를 렌더링 하며,

    이후 새 페이지 요청이 있을 경우, 요청 페이지에 필요한 부분만 전달받아 갱신한다. 

  - CSR(Client Side Rendering)

 

 

SSR(Server Side Rendering) ?

  - 서버로부터 만들어진 정적 리소스 받아와 해당 페이지 전체를 렌더링 하는 방식

  - SSR 방식의 과정

  1. 클라이언트(브라우저) -> 프론트 서버로 요청

  2. 프론트서버 -> 백엔드서버 요청

  3. 백엔드서버 -> 데이터 베이스 

  4. 데이터베이스 -> 백엔드서버

  5. 백엔드서버->프론트서버

  6. 프론트서버->브라우저

 

 - 위와 같은 방식을 사용하기 때문에 클라이언트가 페이지를 이동하거나 

    여러가지의 다른 요청이 생길 때마다 위와같은 과정을 반복하여 새롭게 렌더링된다.

 - 서버부하가 생길 수 있다 (바뀌지 않아도 되는 부분도 렌더링되기 때문)

 - ex) 요청 할때마다 화면이 깜빡임

 

CSR(Client Side Rendering) ?

  - React, Vue 등에서 사용하는 기법으로 클라이언트에서 화면을 구성한다.

  - 클라이언트 요청에 따라 화면에 필요한 데이터 부분만 응답 받아 렌더링된다.

  - 처음에 데이터를 제외한 화면을 그리는 파일들을 모두 다운받는다. 

     그래서 처음 로딩속도는 느릴 수 있다. 

  - 필요한 데이터만 갱신하므로 SSR 방식에 비해 서버 부하가 덜 생김

  - CSR 방식 과정

 1. 브라우저 -> 프론트서버 (화면을 먼저 그림)

 2. 데이터 요청을 위해  브라우저 <-> 백엔드서버 (요청)

 3. 백엔드 <-> 데이터베이스

 - 깜빡임이 없음