CSR 과 SSR의 차이점

CSR 과 SSR 이란?


들어가며

현기 선임님과 오전 스터디 중 pxd 웹 접근성 프로젝트가 ssr로 만들어졌는데
어떤 장점이 있냐 물어보셨습니다. ssr이기 떄문에 seo가 좋다.
그런데 왜 좋은지 설명을 못 드렸습니다 ^^…
웹 관련해서 일을 하고 있다면 상식으로 알아야 할 지식!
그래서 알아보게 된 csr과 ssr의 차이점같이 알아볼까요??

SPA ? MPA?


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

SPA(Single Page Application)

SPA 싱글 페이지 어플리케이션 이란
싱글 페이지 즉 하나의 페이지로 이루어진 홈페이지입니다. 우리 알고 있는 VUE,ANGULA,REACT 프레임워크 로 만든 홈페이지들이 대부분 여기에 속합니다.

image1

MPA(Multiple Page Application)

MPA 멀티페이지 어플리케이션 이란
여러 개의 페이지들로 이루어진 홈페이지입니다.
PHP나 JAVA가 여기에 속합니다.

image2

CSR


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

장점

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

단점

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

SSR


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

장점

csr은 모든 로직이 담겨 있는 js 파일을 다운로드했지만 ssr은 클라이언트에서 요청한 페이지의 html을 다운로드하기 때문에
csr보다 초기 진입 시 로딩이 빠릅니다.
서버에서 렌더링 후 각각 페이지를 넘겨받는 것이므로 각각 페이지에 대한 정보를 입력하기 쉽습니다.
SEO의 매우 좋아요!

단점

링크 이동 클릭 시 새로운 html 파일 자체를 서버에서 받아오기 떄문에 화면 깜빡임 현상이 있습니다.
부분 업데이트하는 csr 과는 달리 클릭했을 때 새로운 html,클릭했을 때 새로운 html 을 받아오기 떄문입니다.
또한 헤더나풋터 처럼 중복되는 내용도 다시로 렌더링 하여 받는 것입니다.
그래서 초기 진입은 csr보다 빠를지 몰라도 페이지 이동은 ssr이 더 느린 편의 속합니다.
또한 ssr은 완성된 html을 js 파일 보다 먼저 받아오기 떄문에 완성된 html로 화면은 확인되지만
js 다운로드가 늦어 진다면 기능이 먹통일 경우가 있습니다.

CSR + SSR


그러면 csr, ssr 중 꼭 하나만 선택해서 사용해야하나요?
그건 아닙니다. 최근 저희 리택토링 프로젝트 관련해 nuxt를 사용하였는데요.
nuxt를 사용해 vue로 만든 어플리케이션을 정적인 페이지로 만들어 서버에 배포 해놓을 수가 있습니다.
그래서 seo를 성공적으로 챙길 수 있었던 것이죠! 그 외 아직 사용해 보진 앉았지만
react + 개츠비
react + 넥스트 제이에스
앵귤러 + 유니버셜
등이 있습니다.

image3

마치며

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

참고문서


  • 나의 머리속…

추천 글