[CS] CSR & SSR

 

 

CSR과 SSR의 차이를 알아보자.

이 차이를 알아보기 위해서는 먼저 SPA와 MPA의 개념을 알면 이해가 쉽다.

---

 

SPA (Single Page Application)

하나의 페이지로 구성된 홈페이지라서 CSR이 적합하다.

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

Vue, React 프레임워크로 만든 홈페이지가 여기 속한다.

 

 

MPA (Multiple Page Application)

여러개의 페이지로 구성된 홈페이지라서 SSR이 적합하다.

PHP나 JAVA가 여기에 속한다.

 

그러나 PHP나 JAVA로 단일 페이지를 구성하면 그것은 SPA이다.

 

 

 

---

CSR (Client Side Rendering)

 

• HTML 결과를 javascript를 사용해 웹 브라우저에서 동적으로 생성해서 적용한다.
• 웹 환경을 앱처럼 필요한 곳만 부분부분 변경할 수 있다.
• 새로고침이 발생하지 않아 페이지를 새로 렌더링 하지 않는다.
• 서버에서 필요한 데이터를 한 번에 받아오고 그 받은 데이터를 브라우저가 주체가 되어 작동한다.
• React, Vue.js가 관련된 기술이며, 구글 지도나 Gmail 등이 CSR의 대표 예시이다.
• 웹 프론트엔드 개발자가 주로 사용하는 방식이다.

 

 

SSR (Server Side Rendering)

• HTML 최종 결과를 서버에서 생성해서 웹 브라우저에 전달한다.
• 클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨준다.
• 초기구동 속도가 빠르지만 이후에 계속해서 렌더링을 해야하기 때문에 속도가 느려진다.
• 새로고침이 있기 때문에 화면 깜빡임이 있다.
• 검색엔진최적화(SEO)가 가능하다.
• JSP, Thymeleaf가 관련된 기술이며, 백엔드 개발자가 주로 사용하는 방식이다.