SSR과 CSR 그리고 SPA

07 Apr 2021

SSR

전통적인 웹 어플리케이션 방식으로 요청시 마다 서버에서 처리하여 새로고침으로 페이지 응답

웹에서 기능과 데이터가 많아지면서 SPA가 생김

SSR은 처음 클라이언트가 접속했을때 브라우저에게 자바스크립트 코드를 다운받아 해설할때까지 기다리지 않고 서버에서 사용자에게 보여질 HTML을 모두 구성하여서 미리 준비해 사용자에게 페이지를 보여주는 방식이다.

사용자가 웹 페이지에 접속했을때 서버에서는 사용자에게 렌더링 될 HTML파일을 응답하여 사용자에게 웹페이지가 바로 렌더링 될 수 있도록 해준다.

그 후 브라우저는 자바스크립트 파일을 다운받아 해석하고 실행하는 절차를 가진다.

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다는 페이지를 구성하는 속도는 다소 늦어질 수 있지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 또한 SEO또한 쉽게 구성할 수 있다.

과정

1. 서버가 렌더링될 준비가 된 HTML을 브라우저로 보낸다.
2. 브라우저는 페이지를 렌더링하며, 페이지가 보이게 된다. 그리고 브라우저는 JS를 다운로드한다.
3. 브라우저는 리액트를 실행한다.
4. 페이지는 이제 작동가능하다.

SEO란?

검색자의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색결과 페이지에서 잘 노출 되도록 웹 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책이라고 할 수 있습니다.

CSR

CSR은 자바스크립트 파일을 브라우저에서 해석해 렌더링 하는 방식이다.

클라이언트가 자바스크립트 파일을 브라우저에서 해석한 후 HTML을 렌더링한다.

반면 CSR은 SSr보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이넡으에서 추가로 요청하여 재구성해야하기 때문에 전체적인 페이지 완료 시점은 SSR보다 느려진다.

과정

1. 서버가 브라우저에 응답을 보낸다.
2. 브라우저는 JS를 다운로드한다.
3. 브라우저는 리액트를 실행한다.
4. 페이지는 이제 보이고 작동가능하다.

SPA, MPA와 CSR, SSR과의 관계

SPA

서버로부터 처음에만 페이지를 받아오고 이후는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 애플리케이션을 의미

페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로고침 되지않고 다른 페이지로 넘어가지 않습니다.

즉 하나의 페이지에서 사람들에게 보이는 부분만 변경되는 원리입니다.

MPA

서버로부터 첫 페이지를 받아오고 이후에 데이터를 수정하거나 조회할대 다른 완전한 페이지로 이동합니다.

그렇다면 SPA와 MPA는 CSR 그리고 SSR과 어떤 관계를 가지게 될까요?

SPA는 처음으로 페이지를 서버로 부터 받아온 후에 서버로 부터 받는 데이터를 통해 동적으로 DOM을 구성한 후에 렌더링 되는 화면으로 바뀌게 합니다. 즉, 서버로 부터 HTML을 받아오는 것이 아니라 브라우저 내에서 HTML구성 즉 DOM을 구성해야 한다는 의미입니다. CSR방식을 이용하게 됩니다.

반면에 MPA는 동적이지 않는 페이지를 상황에 맞게 클라이언트에 뿌려줘야하지 때문에 SSR방식을 채택하게 됩니다.

참고사이트

• https://velog.io/@rhftnqls/CSR-SSR
• https://poiemaweb.com/js-spa