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

회의시간에 SSR과 CSR에 대해 다시금 보게 되었다. 원래 서버사이드렌더링과 클라이언트 사이드 렌더링 이정도만 알고있었지 둘의 차이점에 대해 크게 다가오지 않았었다. 

 

CSR : 클라이언트 내부에서 처리하기 때문에 서버의 영향이 없다.

SSR : 이는 주로 검색엔진 최적화, 보안 측면에서 사용한다. 이 점이 아니면 굳이 SSR을 쓰지 않고도 CSR로 처리가 가능하다는.. 검색엔진의 최적화는 주로 쇼핑몰 같은데에서 쓰인다. 쇼핑몰에서 파생되는 개념인 NFT 마켓플레이스도 비슷한 개념이고.

 

근데 서비스를 사용하는 사용자 입장에서는 CSR과 SSR의 차이점에 대해 느낄 수 있는가?에 대해 궁금해서 질문하였다.

CSR : 페이지가 흰 화면이 먼저 뜨고, 차차 서버에서 데이터를 받아온다. 이때 서버에서 데이터가 받아오는 시간이 걸린다.

이를 사용자가 지루함을 느끼지 않게 하기 위해서 일단 Skeleton을 보여준다. Skeleton은 주로 이미지 박스나, 카드 UI 같은 것들이 있다. 흰 화면 > 틀을 먼저 보여주고 차차 텍스트나 필요한 데이터를 서버에서 받아온다.

* 서버에서 받아온 데이터를 클라이언트인 브라우저가 그 데이터를 화면에 띄워준다. 

SSR : 필요한 데이터를 먼저 가져와서 뼈대를 세우고, 이미지는 좀 늦게 뜨더라도 '텍스트'가 빨리 사용자에게 보여진다. 

 

결국, 거의 대부분의 웹 브라우저는 정말 심각하게 느리지 않는 이상 몇초만에 페이지가 다 뜬다. 

이를 CSR인지 SSR인지에 대해서 사용자는 크게 체감을 못한다는 것이다. 하지만 이를 바라보는 UX의 설계가 매우 중요하다고 한다. 일단 둘다 각자의 장단점은 분명한 것 같으니.. 

 

일단 나는 이를 구현하기보다는, 백엔드 개발자로서 + 서비스를 개발하는 입장에서 어떤 점이 사용자 상황에 맞게 CSR로 구현하고, SSR로 구현하느냐에 따라 달라지는지에 대한 입장 차이를 인지하고 있으려고 한다.