CSR 과 SSR

CSR vs SSR

• 대표적인 SPA 프레임워크인 Vue와 React는 Client Side Rendering(CSR 방식으로 View 생성.
• PHP는 Multi page application(MPA)로 Server Side Rendering (SSR)방식으로 View를 생성.

CSR vs SSR

CSR

• 브라우저(client) 에서 js에 의해 view(HTML)을 동적으로 생성.

장점

• Page 전환이 SSR보다 상대적으로 빠르다.
• 페이지가 로딩 되는 순간 필요한 js들이 모두 있기 때문에 사용자는 바로 상호작용 가능하다.

단점

• 최초 접속시 모든 js 와 static( html,image)를 가져와야 하기 때문에 최초 접속시 로딩 속도는 SSR비해 느리다.
• 낮은 SEO 성능을 보인다 (Search Engine Optimization)
  • 검색 엔진들이 사이트를 크롤링 하여 html 문서들을 분석한다. 그러나 초기에 모든 자원을 받아오기 전의 html문서는 비어있기 때문에 검색엔진이 내용을 파악하기에 어려움이 있다.

SSR

• Web Server 에서 view를 생성한다.
• page가 전환 될 때 마다 client가 server에 view를 요청하고, server는 해당하는 페이지를 생성 후 client에 전송한다.

장점

• 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져고이 때문에 CSR보다 초기 로딩 속도가 빠르다.
• html의 내용이 모두 서버로부터 생성되어서 오기 때문에 SEO에 유리하다.

단점

• 페이지 전환 속도는 CSR에 비해 상대적으로 느리다.
• 페이지 요청이 빈번해질수록 CSR에 비해 서버 부하가 더 커진다.
• 화면 깜빡임 문제
  • 페이지 전환이 이루어 질 때 마다 새로운 html을 받아 온다.
• 사용자 친화적이지 않다
  • TTV와 TTI 사이의 시간차이 때문.
    • TTV (time to view) 사용자가 웹 페이지를 볼 수 있는데 까지 걸리는 시간
    • TTI(time to interact) 사용자가웹 페이지를 동적으로 인터랙션 가능하게 되는 시간
    • 초기 로딩에는 서버가 보여지는데 필요한 요소들을 먼저 보내어 view를 구성하는데 이 때 기능 동작에 필요한 js가 포함되지 않는다.
    • 사용자가 버튼을 누르는 등의 interaction을 시도 할 때, 아직 js가 받아지지 않아서 기능이 동작하지 않는다.
    • => 사용자 친화적이지 않음.

CSR, SSR 뭐가 더 좋은가?

사이트의 성격에 따라 적합한 렌더링 방식이 다르다. 어느 하나가 좋다고 콕 집어 말할 수는 없다.
미국의 유통 기업인 월마트의 쇼핑몰은 SSR렌더링 방식을 사용한다(https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8)

쇼핑몰은 사용자가 보는것이 주가 되므로 초기 로딩 시간이 오래 걸리는 CSR보다는 빠르게 화면을 볼 수 있는 SSR이 더욱 잘 맞는다.

 

반면 인스타그램과 페이스북 같은 유저 인터랙션이 활발한 사이트는 뷰가 보임과 동시에 상호작용이 가능하므로 CSR이 더 적합한 방식이다 ( 내부적으로 ssr을 도입 하고 있는지는 모르겠으나 React로 개발된 사이트)

 

따라서 어느것이 더 좋다 나쁘다를 따지기 보다는 만들고자 하는 사이트의 성격에 따라 적합한 렌더링 방식을 도입하는 것이 올바른 선택이다.