SSR(Server Side Rendering)과 CSR(Client Side Rendering) 차이

SSR(Server Side Rendering)과 CSR(Client Side Rendering) 차이

우선 Rendering 이란?

렌더링이란 화면에 보여지는 웹 페이지를 만드는 과정입니다.

웹 페이지는 HTML, CSS, javascript 로 이루어져 있습니다.

이 3가지 파일을 합쳐서 우리가 보는 웹 화면을 만드는 것을 렌더링 한다고 합니다.

 

SSR란?

출처: The Benefits of Server Side Rendering Over Client Side Rendering

Server Side Rendering 의 약어로 서버에서 화면을 구성해(랜더링 해서) 브라우저로 보내는 방식입니다.

이전에 많이 사용했던 JSP/Servlet이 SSR 방식입니다.

JSP를 사용해본 사람이라면 쉽게 이해가 될 겁니다.

사용자의 요청이 들어오면 필요한 데이터를 DB에서 가져오고, 데이터를 삽입한 완성된 HTML을 브라우저로 보내줍니다.

브라우저는 받은 HTML을 화면에 보여주게 됩니다.

 

이렇게 요청마다 다른 페이지를 보여주는 방식을 MPA(Multiple Page Application)이라고 합니다.

MPA 방식은 요청마다 다른 페이지를 만들어서 반환하기 때문에 반응 속도가 느립니다.

브라우저의 성능이 좋아지면서 반응 속도를 높이기 위해 사용된 방식이 SPA, CSR입니다.

 

CSR란?

출처: The Benefits of Server Side Rendering Over Client Side Rendering

SPA(Single Page Application)의 개념과 함께 등장한 CSR은 Client Side Rendering의 약어로 SSR에 반대되는 개념입니다.

SPA는 초기 로딩시 HTML과 모든 JS파일을 받아오고, 하나의 HTML에 JS로 화면을 변경하는 방식입니다.

클라이언트(브라우저)가 빈 HTML로 화면을 그리고, 이후에 JS에 따라 화면을 채워넣기 때문에

클라이언트 단에서 렌더링하는 CSR이라고 할 수 있습니다.

 

CSR는 초기 로딩시 HTML과 JS를 모두 받아왔기 때문에, 사용자가 클릭시 반응속도가 빠릅니다.

서버에 갔다올 필요없이, 이미 받아온 JS로 즉시 반영되기 때문입니다.

하지만 처음 접속 시 HTML과 모든 JS를 받아오는 동안 화면이 보이지 않는다는 단점이 있습니다.

 

SSR과 CSR의 장단점

Server Side Rendering

장점: 초기 렌더링 속도가 빠르다.

단점: 반응 속도가 느리다.

 

Client Side Rendering

장점: 반응 속도가 빠르다.

단점: 초기 렌더링 속도가 느리다.

 

앞서 나왔던 내용을 위와같이 요약할 수 있는데요.

CSR에는 SEO에 불리하다는 단점이 하나 더 있습니다.

그럼 SEO는 무엇일까요?

 

SEO (Search Engine Optimization)

SEO는 Search Engine Optimization의 약어로 검색 엔진 최적화 라는 의미입니다.

CSR이 SEO에 불리한 이유는 CSR의 동작방식 때문입니다.

CSR은 접속시 비어있는 HTML과 JS를 보내서 브라우저에서 JS를 실행시켜 화면을 그리는데,

대부분의 검색 엔진은 HTML만 크롤링하여 가져가고 JS는 실행하지 않습니다.

때문에 검색 엔진은 CSR방식으로 만들어진 웹 컨텐츠를 제대로 가져가지 못합니다.

 

회사 홍보 웹페이지나 블로그 SNS 등에서는 검색에 나오지 않으면 의미가 없죠.

네이버 블로그 역시 위와같은 이유로 Node.js 기반의 SSR으로 전환했다고 합니다.

그럼 어떤 아키텍처로 변화하고 있을까요?

 

장점만 모을 수는 없을까?

CSR과 SSR이 무엇인지와 어떤 장단점이 있는지 알아보았습니다.

그렇다면 반응 속도가 빠르다는 CSR의 장점과 검색엔진에 잘 노출되는 SSR의 장점만 모을 수는 없을까요?

 

이러한 관점에서 SPA 형태가 SSR로 동작하는 방식이 사용되고있습니다.

최초 접속 시에는 서버에서 렌더링하는 SSR방식으로 HTML을 반환하고,

이후에는 기존 SPA와 같이 JS로 브라우저에서 렌더링하는 CSR방식을 사용합니다.

이렇게 되면 SEO 문제도 해결되고, CSR의 장점과 SSR의 장점을 모두 가져갈 수 있습니다.

 

Node.js에서 설정을 변경해 SSR을 구현할 수도 있지만,

(위에서 말한 네이버 블로그팀이 해당 방식을 채택했습니다.)

많이 사용되는 자바스크립트 프레임워크에는 각각의 짝궁이 존재합니다.

• React - Next.js
• Vue - Nuxt.js
• Angular - Universal Angular
• Svelte - Sapper / Svelte Kit

지금까지는 위의 조합이 많이 사용되고 있어 다음에는 Next.js에 대해 공부해볼까 합니다.

 

끝나기 전에.. SPA가 CSR인가요??

처음 SSR과 CSR에 대해 찾아보며 가장 먼저 들었던 의문입니다.

결론부터 말하자면 아닙니다.

 

SPA는 Single Page Application으로 하나의 화면을 가진 애플리케이션이란 의미입니다.

기존의 SPA가 대부분 CSR 방식으로 동작했기 때문에 많이들 햇갈리는데요.

 

SPA/MPA는 웹페이지가 하나(single)인지 여러개(mutiple)인지를 기준으로

CSR/SSR은 웹페이지의 렌더링이 클라이언트(client)에서 OR 서버(server)에서 일어나는지를 기준으로 구분합니다.

즉, SPA/MPA는 페이지 수를 기준으로, CSR/SSR은 렌더링이 되는 위치를 기준으로 구분합니다.

 

create-react-app으로 만든 제 프로젝트는 CSR인가요?

=> 맞습니다. create-react-app으로 생성된 어플리케이션은 별도의 설정이 없다면 CSR로 동작합니다.

SPA는 SSR로 만들 수 없나요?

-> 아닙니다. SPA이라도 추가 설정을 통해 SSR로 구현할 수 있습니다.

 

더 궁금한 사항은 댓글로 달아주세요! 같이 공부해요!

 

출처

• https://d2.naver.com/helloworld/7804182
• https://medium.com/iotrustlab/ssr-server-side-rendering-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0-22d7e918ec1
• https://blog.hahus.kr/csr-ssr-spa-mpa-ede7b55c5f6f
• https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C