main-logo

CSR과 SSR의 차이점

CSR과 SSR 이란?

profile
1320129
2022년 04월 24일 · 0 분 소요

들어가며

저희 선임님과 오전 스터디 중 pxd 웹 접근성 프로젝트가 SSR 환경으로 만들어졌는데 웹 접근성의 어떤 장점이 있냐 물어보셨습니다.
“SSR이기 때문에 SEO가 좋다.”
라고 대답했지만, SSR이 왜 SEO가 좋은지 설명을 못 드렸습니다.
웹 관련해서 일하고 있다면 상식으로 알아야 할 지식!
그래서 알아보게 된 CSR과 SSR의 차이점같이 알아볼까요??

SPA? MPA?

우선 CSR과 SSR을 설명해 드리기 전에 SPA와 MPA의 개념을 알아야 하는데요.
서로 밀접한 관계라고 볼 수 있습니다! 우리에게 좀 더 친숙한 SPA부터 알아봅시다!

SPA(Single Page Application)

SPA 싱글 페이지 애플리케이션 이란?
싱글 페이지 즉, 하나의 페이지로 이루어진 홈페이지입니다.
하나의 페이지로만 구성되어 있어 CSR에 적합합니다.
데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않습니다.
우리 알고 있는 Vue, Angular, React 프레임워크로 만든 홈페이지들이 대부분 여기에 속합니다.
그렇다고 모든 SPA가 CSR을 사용하는 건 아닙니다.
PHP나 JAVA로 정적인 페이지 하나만 구성된 홈페이지라면 그것 또한 SPA랍니다.

 

image1.png

 

MPA(Multiple Page Application)

MPA 멀티페이지 애플리케이션 이란?
여러 개의 페이지로 이루어진 홈페이지입니다.
PHP나 JAVA가 여기에 속합니다.
여러 개의 페이지로 구성되어 있으므로 보통 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고 클라이언트에게 응답을 주는 방식인 SSR이 환경을 사용합니다.
SPA와 반대로 새로고침이 발생합니다.

 

image2.jpg

CSR

자 그러면 이제 CSR과 SSR을 알아볼까요?
CSR 클라이언트 사이드 렌더링이라는 뜻으로 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드를 합니다.
그 후 빈 HTML에 Javascript를 이용하여 Dom을 동적으로 생성하여 그려 내게 됩니다.
이렇게 클라이언트에서 렌더링한다고 하여 클라이언트 사이드 렌더링입니다.
아까 설명해 드렸던 SPA에 적합한 환경입니다.

장점

그렇게 구동하는 CSR의 장점은 Javascript를 사용해서 동적으로 Dom을 그려내기 때문에 원하는 내용만 업데이트를 할 수 있습니다.
예를 들어 링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정으로 두고 안에 콘텐츠만 업데이트하여 로드할 수 있습니다.

단점

또한 단점은 HTML 파일을 하나만 받아와서 작동하다 보니 각각 페이지에 대한 정보를 담기 힘들어 SEO에 취약합니다. (요즘 구글 봇은 똑똑해서 CSR에서도 SEO를 구분할 수 있다고 하는데 그래도 MPA를 더 선호)
또한 첫 로드 시 모든 로직이 담겨있는 Javascript를 다운로드하다 보니 첫 진입 시 로딩 속도가 길다는 단점이 있습니다.

SSR

SSR은 서버 사이드 렌더링이라는 뜻으로 구동 방식은 서버에서 렌더링하여 완성된 HTML 파일을 로드해 줍니다.
클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기 때문에 페이지가 여러 가지일 수밖에 없습니다.
그러므로 MPA 구동 방식과 밀접한 관계가 있습니다.

장점

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

단점

링크 이동 클릭 시 새로운 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

등이 있습니다.

image3.png

마치며

이번 CSR, SSR을 공부하면서 기본적인 지식을 많이 배우게 된 계기였습니다.
화젯거리인 기술을 배우는 것도 좋지만 기본적인 지식을 배우면 더 넓은 시야를 가지고 기존의 알았던 지식까지 추가로 더 깊이 이해가 되는 매우 뜻깊은 시간이라고 생각합니다.