[2021.07.12] SPA의 정의와 장단점

 

SPA란?

Single Page Application

단일 페이지 애플리케이션

SPA는 모던 웹에서 사용되는 클라이언트 사이드 렌더링 방식.

기존의 서버 사이드 렌더링 방식보다 배포가 간단하고 네이티브 앱과 유사한 사용자 경험을 제공.

 

 

[참고] 클라이언트 사이드 렌더링 방식이란(CSR)?

JavaScript기반 비동기 모델

웹 애플리케이션에 필요한 모든 정적 리소스를 최초 1회에 한해 다운로드.

이후 새로운 페이지요청이 들어오면 필요한 부분에만 데이터를 전달받아 페이지를 갱신.

서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행

 

 

[참고] 서버 사이드 렌더링 방식이란(SSR)?

전통적 방식

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법.

새로운 페이지 요청 때 마다 전체 페이지를 다시 렌더링 해야 한다. 비효율적.

 

 

[참고] 네이티브 앱이란?

우리가 흔히 말하는 ' 어플리케이션 ' 을 의미

모바일 기기에 최적화 된 언어로 개발 된 앱

안드로이드 혹은 iOS기반 SDK를 이용해 Java언어나 Swift로 만드는 대부분의 앱이 해당됨.

 

 

SPA의 특징?

SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 1회에 한해 다운로드.

이후 새로운 페이지요청이 들어오면 필요한 부분에만 데이터를 전달받아 페이지를 갱신.

따라서 전통적 방식(서버 사이드 렌더링)보다 전체적인 트래픽이 감소하고 훨씬 보기좋은 서비스를 제공.

 

 

SPA의 단점?

1. 초기 구동 속도가 느리다.
   이는 최초 한 번에 모든 정적 리소스를 다운받기 때문이다.
   하지만 SPA는 웹페이지 보단 애플리케이션에 적합한 기술!
   트래픽의 감소, 속도, 사용성, 반응성 향상 등의 장점을 생각한다면 결정적인 단점은 아님.
   
   
2. SEO(검색 엔진 최적화)문제
   자바스크립트 위주로 돌아가는 프로젝트는 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못함. 따라서 검색엔진 크롤러가 데이터들을 제대로 수집하지 못한다.
   예외적으로 구글의 검색엔진은 자바스크립트 엔진이 내장되어있다.
   하지만 네이버, 다음 등의 검색엔진은 제대로 크롤링하지 못하기때문에 서버사이드렌더링을 따로 구현해야한다.
   
   SEO는 항상 단점으로 부각되어왔던 점이지만,
   SPA는 정보 제공을 위한 웹페이지 성격 보단 애플리케이션에 적합한 기술!
   따라서 SEO는 큰 문제로 볼 수는 없다는 의견이 많다.

 

 

Routing이란?

주소에 따라 다른 뷰를 렌더링하는 것.

• 사용자가 task를 수행하기 위해 화면을 전환하는 네비게이션을 관리하기 위한 기능을 의미.
• 사용자가 요청한 URL 혹은 이벤트를 해석하고 새로운 페이지로 전환하기 위해
  서버에 데이터를 요청하고 화면을 전환하는 일련의 행위를 말한다.

 

 

 

 

🔽 Reference

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

 

SPA & Routing | PoiemaWeb