CSR과 SSR

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

SPA와 MPA

• SPA (Single Page Application)

하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다.

• MPA(Multiple Page Application)

사용자가 페이지를 요청할 때 마다,웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다.

SPA가 사용하는 방식이 CSR이고 MPA가 사용하는 방식이 SSR이다.

CSR

CSR에선 브라우저가 서버에 HTML과 JS파일을 요청한 후 로드되면 사용자의 상호작용에따라 JS를 이용해서 동적으로 렌더링을 시킨다. (쉽게 말하면 사용자에 행동에따라 필요한 부분만 다시 읽기 때문에 서버측에서 렌더링하여 전체 페이지를 다시 읽는것 보다 빠른 인터렉션을 기대할 수 있다.)

• 장점
  • 첫 로딩만 기다리면 , 동적으로 빠르게 렌더링이 되기때문에 사용자경험(UX)가 좋다.
  • 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다
• 단점
  • 모든 스크립트 파일이 로드될 때 까지 기다려야한다.
    • 리소스를 청크(Chunk) 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬수 있지만 완벽히 해결할 수는 없다.
  • 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화의 문제가있다.
    • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가된다.

SSR

SSR에선 브라우저가 페이지를 요청할 때마다 해당 페이지의 관련된 HTML , CSS , JS 파일 및 데이터를 받아와서 렌더링을 시킨다.

• 장점
  • 초기 로딩속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
  • JS를 이용한 렌더링이 아니기 때문에 검색 엔진 최적화가 가능함.
• 단점
  • 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험(UX)가 SPA에비해 좋지않다.
  • 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.

UX와 UI

• UX(User Experience) 디자인은 사용자 경험을 의미한다. 사용자가 어떤 제품,시스템 서비스 등 직접적 혹은 간접적으로 이용하면서 느끼는 반응과 행동들과 같은 경험을 총체적으로 설계(사용자가 겪을 경험 중심적인 관점)

• UI(User Interface) 디자인은 사용자가 제품을 어떤 방식으로 이용하도록 만드느냐를 디자인하는것 즉, 겉으로 시각화되는 작업이라 보면된다. 사용자가 실제로 마주하게될 디자인 레이아웃등을 아우르는 개념(눈에 보이는 색감, 정렬, 모양과 크기등)

참고 및 출처

• CSR(Client Side Rendering)과 SSR(Server Side Rendering)
• UI&UX
• 서버사이드렌더링 & 클라이언트사이드렌더링