SSR & CSR

UI/UX와 렌더링의 기본 개념과 렌더링 동작 과정에 대해 이해

---

UI/UX

• UI?
  • User Interface로, 사용자에게 보여지는 view, 디자인, 레이아웃을 의미
  • 폰트, 색깔, 줄간격 등의 디자인 요소가 포함됨
• UX?
  • User eXperience로, 사용자들의 경험을 분석하여 더 편하고 효율적인 방향으로 프로세스가 동작할 수 있도록 만드는 것을 의미
  • 터치화면, 사용자의 선택 flow 등
• 로그인 기능을 구현할 때 요구되는 UX의 예시?
  • id나 email 작성 시 영문 타자키가 보여지는 것
  • id작성 후 엔터키를 누르면 비밀번호 입력태그로 넘어가는 것
  • 정해진 형식에 어긋나면 실시간으로 형식에 어긋난 입력임을 나타내 주는 것
  • 로그인 인증 실패 시 이메일(ID)이 틀렸는지, 비밀번호가 틀렸는지 구분해서 알려주는 것

 

 

SSR & CSR

• SSR?
  • Server Side Rendering
  • 특징
    • html을 서버 쪽에서 렌더링하기 때문에 초기 로딩 속도는 짧지만, 매번 페이지 전환 시 새로고침이 필요
    • MPA(Multiple Page Application) 개발에 주로 활용
  • 장점
    • 검색엔진 최적화(url마다 고유의 렌더링이 완료된 페이지를 가지고 있기 때문에, 크롤러가 접근했을 때 읽어들일 수 있음)
    • 초기로딩 성능 개선(첫 렌더링된 HTML을 클라이언트에서 전달해주기 때문에 초기 로딩 속도를 많이 줄여줌)
  • 단점
    • 프로젝트 복잡도(라우터 사용하다보면 복잡도 높아질 수 있음)
    • 성능 악화 가능성(서버 쪽에서 렌더링을 진행하면 그만큼 서버 자원이 많이 사용되기 때문에 불필요한 트래픽 낭비 발생)

SSR의 경우, 매번 페이지 전환 시 새로고침이 필요하기 때문에 불필요한 데이터까지 한번에 가져오는 데이터 트래픽이 발생할 수 있다. 하지만, 서버에서 html을 렌더링하여 띄워주기 때문에 초기 로딩 속도가 빠르고, url마다 고유의 렌더링이 완료된 페이지를 가지고 있기에 검색엔진 크롤러가 접근했을 때 읽어들일 수 있어 검색엔진 최적화에 알맞은 렌더링 방식이다.

• CSR?
  • Client Side Rendering
  • 특징
    • 서버로부터 비어있는 html, js, css 등 필요한 파일들을 다운로드 받고, 이후에 비동기 통신을 통해 필요한 데이터를 가져와 클라이언트 쪽에서 렌더링하여 화면을 표시
    • SPA(Single Page Application) 개발에 주로 활용
  • 장점
    • 서버 측 트래픽 감소(비동기 통신으로 그때그때 필요한 데이터만 전송함)
    • 높은 UX(새로고침이 발생하지 않으므로 네이티브 앱과 같은 사용자 경험을 제공할 수 있음)
  • 단점
    • 초기 로딩 속도가 오래걸림
    • 검색 엔진 노출에 불리
      • SEO, 검색 엔진 크롤러가 데이터 수집이 어려움 =>  ex. 크롬에서 리액트로 만든 웹앱 소스를 확인하면 내용이 비어있음
      • 구글 검색엔진은 자바스크립트 엔진이 내장되어 있지만, 네이버나 다음 등 검색엔진은 크롤링에 어려움이 있어 SSR을 따로 구현해야 하는 번거로움 존재
      • Ajax 요청에 의해 서버로부터 데이터를 응답받아 화면을 생성하는 경우, 브라우저의 주소창 url은 변경되지 않음 => 이는 사용자의 방문 history를 관리할 수 없음을 의미하며, SEO 이슈 발생 원인이기도 함(history 관리를 위해서는 각 페이지가 브라우저의 주소창에서 구별할 수 있는 유일한 url을 소유하여야 함)
      • 하지만 SPA는 정보 제공을 위한 웹페이지 보다는 애플리케이션에 적합한 기술이며, Angular나 React와 같은 CSR 지원 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 큰 단점은 아님!

CSR의 경우, 최초에 서버로부터 비어있는 html과 js 등 서비스에 필요한 리소스들을 다운받아 클라이언트에서 렌더링 하기 때문에 초기 로딩 속도가 오래 걸리고, 이후에 비동기 통신을 통해 필요한 데이터를 가져와 화면에 보여주는 방식이라 검색엔진 크롤러에 의해 데이터가 안읽히는 단점이 있다. 하지만, 불필요한 화면 전환이나 불필요한 데이터를 반복적으로 가져올 필요가 없어 서버 트래픽 부하가 감소하고, 사용자로 하여금 웹이지만 네이티브 앱과 같은 빠른 반응속도를 기대할 수 있다. 주로 SPA 형식으로 개발하는 데 많이 사용되며, Vuejs나 React와 같은 프레임워크로 SPA를 개발한다.

• CSR 등장 배경?
  • link tag를 사용하는 전통적인 웹 방식(SSR 방식)은 페이지 전환 시 새로고침과 함께 서버에 새로운 페이지에 대한 요청을 하는 방식으로, 전체 페이지를 새로 렌더링 하여 불필요하거나 반복되는 부분까지 추가적인 트래픽이 발생해 사용자로 하여금 응답 속도가 느리다는 느낌을 받게 할 수 있음
  • 모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈
  • 그래서 SPA(Single Page Application) 서비스 등장 => 사용자 경험(UX) 향상과 애플리케이션 속도의 향상을 기대할 수 있는 **모바일 퍼스트(Mobile First) 전략에 부합
    • SPA : 처음에 하나의 빈 페이지(Single page)를 서버측으로부터 제공받고, View는 Client에서 특정 라이브러리 혹은 프레임워크를 사용해 렌더링하는 방식
    • 서버는 client로부터의 비동기 요청에 의해 JSON 파일만 보내주고, HTML을 그리는 역할은 자바스크립트를 통해 client 측에서 수행하는 방식
  • 서버의 트래픽을 감소시키고, 사용자에게 더 나은 UX를 제공할 수 있도록 함
• MVVM?
  • Model - View - ViewModel 디자인 패턴으로, 데이터를 담고 있는 Model과 사용자에게 보여지는 View 사이를 ViewModel이 이어줌으로써, Model의 값이 바뀔 때마다 view에 실시간 바인딩이 가능한 모델
  • View와 Model 사이의 의존성이 없고, Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인 패턴 => 각각의 부분은 독립적이기 때문에 모듈화하여 개발 가능
  • View Model의 설계가 어려움
  • SPA 서비스 개발에 주로 활용
• Next.js
  • React에서 SSR(Server Side Rendering)을 하기 위해 만들어짐(CSR + SSR)
  • SPA에서 전통적인 SSR의 장점(검색엔진 최적화, 초기로딩 빠름) 을 가져오며 CSR의 단점을 극복한 방법

---

<Next.js 참고>

NextJS는 왜 쓰는 걸까?

<CSR&SSR>

CSR & SSR | 👨🏻‍💻 Tech Interview