SSR(MPA)과 CSR(SPA)의 동작원리

웹 페이지가 우리(사용자)에게 보여지는 과정은 여러가지가 있다.
그 과정들에 대해 알아보자

 

먼저 SSR / CSR에 대해 알아보자

SSR(Server-Side Rendering) / CSR(Client-Side-Rendering) 두가지의 기술은

• 어디서 렌더링이 되나?(렌더링이 일어나는 주체)에 따라 달라짐
• 서버에서 렌더링이 되면 SSR, 클라이언트에서 렌더링이 되면 CSR이다.

렌더링이란?

• 웹 페이지나 애플리케이션의 사용자 인터페이스(UI)를 생성하고 화면에 표시하는 과정

SSR(Server-Side Rendering)이란?

• 클라이언트의 요청을 받아 서버에서 동적 웹 페이지 렌더링 후 클라이언트에 반환
• 동작 원리
  1. 브라우저가 서버에 HTTP 요청을 보냄
  2. 서버는 해당 요청을 받아 필요한 데이터를 처리하고, 해당 데이터와 View Template을 Template 엔진을 통해 렌더링
  3. 생성된 HTML 페이지를 클라이언트(브라우저)로 전송
  4. 브라우저는 받은 HTML을 화면에 렌더링

• 장점
  1. 서버가 동적 웹 페이지를 생성하여 반환하기 때문에, 반환하려는 모든 웹 페이지를 갖고있을 필요없음
  2. 구글과 같은 검색엔진 최적화(SEO)가 가능
• 단점
  1. 서버의 역할이 많아 요청이 많아지면 서버의 무리가 갈 수 있다.

 

CSR(Client-Side-Rendering)이란?

•  클라이언트의 요청을 받아 서버에서 데이터와 웹 페이지 파일들을 받은 후 브라우저에서 렌더링
•  동작 원리
  1. 브라우저가 서버에 HTTP 요청을 보냄
  2. 서버는 해당 요청을 받아 필요한 데이터를 처리하고, 데이터와 정적 파일(HTML, CSS, JS)들을 브라우저로 전송
  3. 받은 데이터들을 브라우저에서 렌더링
• 장점
  1. 웹 브라우저가 동적 웹 페이지를 생성하여 반환하기 때문에 깜빡거리는 로딩이 없음
• 단점
  1. 구글과 같은 검색엔진 최적화(SEO)가 불가능
  2. 저에게 최적의 사용성(UX)을 제공하려다보니 Bundled JS 크기가 너무 크다 : Initial Loading

---

 

브라우저는 이런 과정들로 서버 / 클라이언트 에서 렌더링되어 사용자에게 보여진다.
그런데 이 브라우저는 하나의 페이지로 이루어진 브라우저인지, 여러 개의 페이지로 이루어진 브라우저인지로 나뉜다.

 

MPA(Multi-Page Application) / SPA(Single-Page Application)이란 개념이 있다.
해당 개념은 구성된 '페이지의 개수'로 나뉜다.

 

MPA(Multi-Page Application)이란?

• 여러 개의 페이지로 구성되어있는 애플리케이션을 말한다.
• 특징
  • 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다.
  • 새로운 페이지 요청 시 서버에서 서버에서 렌더링된 정적 리소스(HTML, CSS, JS)가 다운로드 된다.
  • MPA는 SSR의 방식으로 렌더링된다.

SPA(Single-Page Application)이란?

•  하나의 페이지로 구성되어잇는 애플리케이션을 말한다.
• 특징
  • 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다.
  • 이후에는 데이터를 받아올때만 서버와 통신한다.
  • 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
  • SPA는 CSR의 방식으로 렌더링된다.