SPA (Single Page Application)

• 단일 페이지로 구성됨.

• 기존 SSR과 비교하여 배포가 간단하며 native app과 유사한 ux를 제공할 수 있는 장점이 있음.

• web app에 필요한 모든 정적 resource를 최초 접근 시 단 한번만 다운로드함

• 이후 새로운 페이지 요청 시, 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신함

• 전체적인 트래픽을 감소시킬 수 있음

• ajax : JS를 통한 비동기적 통신 덕분

단점

• 초기 구동속도가 상대적으로 느림

• 검색엔진 최적화(SEO) 이슈
  : 데이터 패치 요청을 통해 sever로부터 데이터를 응답받아 페이지를 동적으로 생성함.

• 브라우저 주소창의 URL이 변경되지 않아, 사용자 방문 history를 관리할 수 없으므로
  SEO 이슈 발생의 원인임.

• 상위 노출이 필요/ 누구에게나 동일 내용 노출 / 페이지마다 데이터 자주 변경
  ==> SSR

• 개인정보 데이터 기준 구성 / 보다 나은 사용자 경험 제공 / 상위노출보다 고객 데이터 보호 더 중요 ==> CSR

SSR : Server Side Rendering

• Server에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
• 모든 데이터가 매핑된 서비스 페이지를 Client(Browser)에 바로 보여줄 수 있다.
• 페이지를 구성하는 속도는 CSR 대비 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
• 검색엔진 최적화 또한 쉽게 구성할 수 있다.

SPA로 구성된 웹 앱에서 SSR이 필요한 이유?

• 검색엔진 최적화 이슈 해결
• CSR의 문제를 해결할 수 있는 방법으로 여러가지 렌더링 기법이 있다.
• SSR을 사용하면 Front-end영역과 Back-end영역을 완전히 분리함으로써 (REST API를 통해) 생산성을 높일 수 있다.

출처

• SPA and routing
• LG CNS BLOG
• Rendering on the Web