CSR VS SSR

CSR과 SSR이 뭔지 알기에 앞서 SPA와 MPA 개념에 대해 알아야한다

SPA란?(single page application)

한개의 페이지로 구성된 어플리케이션

사용자가 필요한 부분의 데이터만 받아와서 페이지를 부분적으로 업데이트하여 사용한다

기존엔 사용자가 페이지를 이동할때마다 해당 페이지에 해당하는 index.html을 서버로부터 매번 가져와 페이지를 전체 업데이트 했다. (서버에 모든 페이지의 index파일이 이미 준비되어있는 형태) 이러한 과정을 개선하기 위해 AJAX를 이용한 SPA가 탄생했다.

MPA란?(Multiple Page Application)

여러개의 페이지로 구성된 어플리케이션

새로운 페이지를 요청할때마다 서버에서 렌더링된 정적 리소스를 다운한다

페이지 전체를 다시 렌더링한다

CSR이란?(Client Side Rendering)

페이지의 내용을 클라이언트측에서 만들어 화면에 렌더링하는 것이다.

1. client에서 페이지를 요청하면 server에서 index.html을 보낸다. 해당 index.html의 body는 거의 비어있는 형태이며, 어플리케이션에서 필요한 js파일이 명시되어있다.

2. 이 app.js라는 파일을 client에서 server로 요청하여 다운받는다. 이때 js파일안에는 필요한 로직과 함께 프래임워크, 라이브러리의 소스코드도 모두 포함되어있다.

3. 화면 렌더링 완료! 추가로 필요한 데이터는 server에 요청하여 받아와 해당 부분만 업데이트 해준다.
   CSR은 app.js파일을 다운받고나서 화면이 보임과 동시에 사용자가 상호작용하는것이 가능하다
   

   

CSR의 장단점

장점

1. 전체 페이지를 업데이트할 필요가 없기 때문에 빠르고 “blinking” 이슈가 없다
2. 컴포넌트별 개발이 용이하여 생산성이 높다
3. 자연스러운 사용자 경험

단점

1. body가 거의 비어있기 때문에 검색엔진 최적화 SEO가 어렵다
2. js파일을 번들링하여 한번에 받기 때문에 초기 구동 속도가 느리다

SSR이란?(Server Side Rendering)

페이지의 내용을 서버측에서 미리 만들어둔 후 클라이언트의 요청이 올때마다 해당 페이지의 파일을 응답하는 것이다

1. client에서 페이지를 요청하면 서버에서 html과 데이터들을 합쳐 잘 만들어진 index.html파일을 제공한다
2. 잘 만들어진 html파일이기 때문에 사용자는 바로 화면이 로딩 완료된다
3. html 파일 내부에 명시된 js 파일을 다운요청한다
4. server로 부터 받은 js 파일을 통해 동적으로 상호작용이 가능해진다

SSR의 장단점

장점

1. 초기 로딩이 빠르다
2. 모든 정보가 html에 담겨있기 때문에 SEO 최적화가 좋다

단점

1. 전체 페이지를 새로 불러오기 때문에 blinking 이슈가 있다
2. 요청때마다 서버에서 일을 처리하기 때문에 서버에 오버헤드가 올 수 있다
3. 사용자가 빠르게 화면을 확인할 수 있지만 상호작용할 수 없을 수 있다