CSR 과 SSR

SPA 와 MPA의 개념

CSR과 SSR을 이해하기 위해서는 SPA와 MPA의 개념을 알야야 한다.
서로 밀접한 관계다.
우리에게 더 친숙한 것은 SPA이다.

 

SPA
Single Page Application
하나의 페이지로 이루어진 어플리케이션을 말한다.
하나의 페이지로 구성 되어있어 CSR에 적합하다.
데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않는다.
우리가 알고 있는 Vue, Angular, React 프레임워크로 만든 홈페이지 대부분이 여기에 속한다.

그렇다고 모든 SPA가 CSR을 사용하는 것은 아니다.

php나 java로 정적인 페이지 하나만 구성된 홈페이지라면 이것도 또한 SPA이다.

 

MPA

Multiple Page Application

여러 개의 페이지로 이루어진 홈페이지를 말한다.

PHP나 JAVA가 여기에 속한다.

여러 개의 페이지로 구성되어 있으므로 보통 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고 클라이언트에 응답을 주는 방식인 SSR 환경을 사용합니다.

SPA와 반대로 새로고침이 발생한다.

 

CSR

CSR, 클라이언트 사이드 렌더링을 뜻하는 것으로, 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 자바스크립트를 다운로드 한다. 

그 후 빈 HTML에 JavaScript를 이용하여 DOM을 동적으로 생성하여 그려 내게 된다.

이렇게 클라이언트에서 렌더링한다고 하여 클라이언트 사이드 렌더링이라고 부른다.

위에서 설명했던 SPA에 적합한 환경이다.

 

CSR의 장점

이렇게 구동하는 CSR의 장점은 JavaScript를 이용해서 동적으로 DOM을 그려내기 때문에 원하는 내용만 업데이트 할 수 있다.

예를 들어 링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정으로 두고 안에 콘텐츠만 업데이트하여 로드할 수 있다.

 

CSR의 단점

또한 단점도 있는데, HTML 파일을 하나만 받아와서 작동하다 보니 각각 페이지에 대한 정보를 담기 힘들어 SEO에 취약하다.

요즘 구글 봇은 똑똑하기 때문에 CSR에서도 SEO를 구분할 수 있다고 하지만, 그래도 MPA를 선호한다.

또한 첫 로드 시 모든 로직이 담겨 있는 JavaScript 를 다운로드하다 보니 첫 진입 시 로딩 속도가 길다는 단점이 있다.

 

SSR

SSR은 서버 사이드 렌더링이라는 뜻으로, 구동 방식은 서버에서 렌더링하여 완성된 HTML 파일을 로드해준다.

클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기 때문에 페이지가 여러 가지 일 수 밖에 없다.그러므로 MPA 구동 방식과 밀접한 관계가 있다.

 

SSR의 장점

CSR은 모든 로직이 담겨 있는 JavaScript 파일을 다운로드했지만, SSR은 클라이언트에서 요청한 페이지의 HTML을 다운로드하기 때문에 CSR보다 초기 진입 시 로딩이 빠르다.서버에서 렌더링 후 개별 페이지를 넘겨받는 것이므로 각 페이지에 대한 정보를 입력하기 쉽다.그러므로 CSR보다 SEO를 향상할 수 있다.

 

SSR의 단점

링크 이동 클릭 시 새로운 HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 있다.

부분 업데이트하는 CSR과는 달리 클릭했을 때 새로운 HTML을 받아오기 때문이다.

또한 헤더, 푸터처럼 중복되는 내용도 다시 렌더링하여 받는 것이다.

그래서 초기 진입은 CSR보다 빠를지 몰라도 페이지 이동은 SSR이 더 느린 편에 속한다.

또한 SSR은 완성된 HTML을 JavaScript 파일보다 먼저 받아오기 때문에 완성된 HTML로 화면은 확인되지만, JavaScript 다운로드가 늦어진다면 기능이 동작하지 않는 경우가 있다.

 

CSR + SSR

그렇다면 CSR과 SSR 중 꼭 하나만 선택해서 사용해야 할까?

그건 아니다. 아래 출처의 블로그에 의하면 리팩토링 프로젝트 관련해 Nuxt를 사용했는데 Nuxt를 사용해 Vue로 만든 애플리케이션을 정적인 페이지로 만들어 서버에 배포해 놓을 수가 있었다고 한다.

이렇게 SEO도 성공적으로 챙기고!

아직 사용해 보지는 않았지만, 아래와 같은 리스트가 있다고 한다.

 

○ React + Gatsby

○ React + Next.js

○ Angular + Universal

 

등이 있다고 한다.

---

출처

https://pxd-fed-blog.web.app/csr-ssr/

CSR과 SSR의 차이점

https://story.pxd.co.kr/1662

CSR과 SSR의 차이점

https://hahahoho5915.tistory.com/52

[간단정리] CSR vs SSR 특징 및 차이