SSR과 CSR / SPA와 MPA

1-1. 서버 사이드 렌더링 (SSR)

서버사이드 렌더링은 사용자가 페이지를 이동할 때마다 서버에 새로운 페이지를 요청하는 방식이다.

• 장점
  • 첫 페이지 로딩속도가 CSR에 비해 더 빠르다. (최초 요청시 첫페이지에 해당하는 문서만 요청하기 때문)
  • 검색엔진 최적화 (SEO)가 가능하다.
• 단점
  • 페이지 이동마다 서버에게 뷰를 요청해야하므로 최초 로딩 이후에는 속도가 저하된다.
  • 페이지 요청마다 페이지가 새로고침된다. (깜빡거림 발생)

1-2. 클라이언트 사이드 렌더링 (CSR)

클라이언트 측에서 렌더링을 처리하는 방식이다.클라이언트가 서버에서 받은 데이터를 통해 화면을 그리는 주체가 되는 것.

• 장점 
  • 필요한 데이터만 받아 새로고침없이 화면을 갱신할수 있게된다.
• 단점
  • 첫 페이지 로딩 속도가 SSR에 비해 느리다. (전체 페이지에 대한 모든 문서파일을 받기 때문)
  • 검색엔진최적화(SEO) 약화 ( 자바스크립트 엔진 내장 유무에 따라 차이가 발생)

 

2-1. SPA( Single Page Application)

SPA는 서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하는 것을 의미한다.

데이터를 수정,조회할 때 동적으로 페이지를 구성하여 새로고침 되자 않고 다른 페이지로 넘어가지 않는다.

 

2-1. MPA( Multi Page Application)

MPA는 서버로부터 완전한 페이지를 받아오고 이후에 데이터를 수정,조회할 때 다른 완전한 페이지로 이동한다.

이때 URI가 바뀔 수도 있다.

 

3. SPA != CSR

SPA,MPA는 페이지를 하나 or 다수를 쓰는지의 차이이고 

CSR, SSR은 렌더링을 어디서 하냐의 차이로 비교대상이 될 수 없다.

 

SPA에서는 첫페이지만 받아오고 이후에 데이터의 수정,조회를 하기위해서 CSR이라는 방식을 채택한 것이다.

마찬가지로 MPA는 동적이지 않은 페이지를 상황에 맞게 클라이언트에 뿌려주기 때문에 SSR이라는 방식을 채택한 것이다.

 

4. SPA방식이 모두 CSR인것은 아니다

 

next.js를 사용하면 SPA와 SSR을 접목시킬 수 있다.