[Web] CSR(클라이언트사이드랜더링), SSR(서버사이드랜더링)

 

 

개발자라면 한번정도 들어봤을 단어이자 면접 단골질문인 CSR과 SSR에 대해 자세히 알아보려한다.

CSR(클라이언트 사이드 랜더링)과 SSR(서버 사이드 랜더링)은 반대에 있는 관계에 있어서 각 장단점이 명확하여 자신의 프로젝트에 상황에 맞게 구현하는 것이 중요하다

 

 

먼저, 랜더링이란 다음과 같다

 

https://yangwonjoon.tistory.com/69

[Web] 랜더링이란 무엇인가?

 

 

 

 

 

CSR(클라이언트 사이드 랜더링)

CSR은 서버에서 받은 데이터로 브라우저가 화면을 만든다

즉, 브라우저가 화면을 그리는 주최

 

CSR 동작방식

1. 사용자가 웹 사이트에 요청을 보내면 CDN(서버)이 html, css와 js로 접근 할 수 있는 링크를 클라이언트로 보낸다.
2. 클라이언트는 html, js를 다운받는다 (사용자는 아무것도 안보임)
3. 다운로드가 완료된 js가 실행이 되며 데이터를 위한 API가 호출이 된다. (사용자에게는 placeholder만 보임)
4. 서버가 API로 부터의 요청에 응답하고 받아온 데이터를 넣어주면, 페이지가 상호작용이 가능해진다.

 

즉, 서버에서 처리없이 클라이언트로 보내기 때문에 js를 다 다운받고 실행하기 전까지 사용자가 볼건 없다

 

CDN이란?

- 콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템
- 같은 데이터를 가진 서버를 여러 장소에 분산시키고 데이터 요청이 왔을 때, 요청 위치로부터 가장 가까운 서버에서 데이터를 전송

 

 

 

 

SSR(서버 사이드 랜더링)

SSR은 클라이언트에서 요청이 들어올때마다 서버가 화면을 만들어 제공한다

즉, 서버가 화면을 그리는 주최

 

SSR 동작방식

1. 사용자가 웹 사이트에 요청을 보내면 서버는 즉시 랜더링 가능한 html 파일을 만든다
2. 클라이언트에게 전달하면 html은 즉시 랜더링 된다(조작 불가능, js 다운받기 전)
3. 클라이언트가 js를 다운받는다(사용자는 컨텐츠를 볼 수 있지만 조작 불가능, 이때 사용자의 조작을 기억하고 있다)
4. 브라우저가 js 프레임워크 실행
5. js까지 컴파일이 되면 기억해놨던 사용자의 조작이 실행되고 상호작용 가능해진다

 

 

즉, 서버에서 랜더링 가능한 상태로 클라이언트에게 보내고 js가 다운로드 될 동안 사용자는 볼 컨텐츠가 있음

 

---

 

이 둘의 장단점을 요약하자면 다음과 같다

 

	CSR	SSR
장점	- 페이지간 이동이 상대적으로 빠름 - 사용자 경험이 좋음(새로고침, 깜빡이 등이 없다) - TTV와 TTV 간격이 짧다	- 초기 페이지 랜더링 속도가 빠름 - 페이지를 보여주기 때문에 SEO에 유리함
단점	- 빈페이지를 일단 보여주기 때문에 SEO에 불리 - 초기 페이지 랜더링 속도가 느리다	- TTV와 TTV 간격이 길다 - 새로고침을 하면 전체를 서버에서 다시 받아와야되서 깜빡임 현상이 있다 - 서버의 부하 가능성이 높다

 

 

TTV와 TTI란?

TTV(Time To View)
-> 사용자가 웹브라우저에서 내용을 볼 수 있는 시점 (사용자가 화면을 보는 시점)

TTI(Time To Interact) 
-> 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점(사용자가 실제로 서비스를 이용하는 시점)

 

그렇다면 어떤상황에서 SSR과 CSR이 유리할까?

 

 

 

 

 

CSR이 유리한 상황

• 네트워크가 빠르거나 서버의 성능이 좋을 때 (한번에 받아와야되서)
• SEO가 중요하지 않을때
• 사용자와 상호작용이 많을 때

 

SSR이 유리한 상황

• 네트워크가 느리거나 서버의 성능이 좋지 않을 때
• SEO가 중요할 때
• 첫 페이지 로딩속도가 중요할 때
• 사용자와 상호작용이 많지 않을 때

 

이와 별개로 최근에는 개츠비나 next.js를 사용하여 SSG를 도입하는 곳도 있다고 하는데 다음에는 이를 자세히 알아봐야겠다!