🌈 SPA(싱글 페이지 애플리케이션)

✌ 라운드 트립 애플리케이션(round-trip)

• 오랫동안 웹 앱은 라운드 트립 모델을 따랐다.

• 먼저 브라우저는 첫 HTML 페이지를 서버에 요청하고 수신하고 링크 클릭이나 폼 제출 등 사용자의 행위가 일어나면, 브라우저는 다시 완전히 새로운 HTML 콘텐츠를 요청하고 수신한다.

• 이런 방식은 애플리케이션에서 브라우저는 본질적으로 HTML 콘텐츠의 렌더링 엔진일 뿐이며, 모든 애플리케이션 로직과 데이터는 서버에 존재한다.

• 브라우저는 일련의 stateless(무상태) HTTP 요청을 보내고 서버는 그에 따라 HTML 문서를 동적으로 생성해 처리하는 식이다.

• 웹 브라우저의 사용률이 낮은 대신 다양한 종류의 클라이언트를 지원할 때 라운드 트립 방식의 웹 개발을 많이 채택한다.

❗ 라운드 트립 애플리케이션의 단점

• 사용자가 다음 HTML 문서가 요청되고 로딩될 때까지 기다려야 한다.
• 모든 요청을 처리하고 모든 애플리케이션 상태를 관리하기 위해 서버 측에 대형 인프라가 필요하다.
• 각 HTML 문서가 독립적으로 동일한 콘텐츠를 각자 포함하므로 더 넓은 대역폭이 필요하다.

📌 이러한 이유로 리액트는 라운드 트립 애플리케이션에 적합하지 않은데, 서버로부터 수신한 새로운 HTML 문서마다 브라우저가 초기 준비 작업을 수행해야 하기 때문이다.

✌ 싱글 페이지 애플리케이션(SPA, single-page application)

• 라운드 트립 애플리케이션과 다른 접근법을 사용한는데 첫 HTML 문서의 로딩은 동일하다.

• 그 다음 사용자의 행위는 HTML의 작은 조각이나 데이터 집합에 삽입할 일부 데이터만을 위한 HTTP 요청을 발생시킨다.

• 따라서, 초기 HTML 문서는 다시 로딩되거나 대체되지 않으며, HTTP 요청이 비동기 방식으로 수행되는 동안 사용자는 계속 현재의 HTML과 상호작용할 수 있다.

• 리액트는 SPA가 잘 어을리는데 애플리케이션을 초기화하는 브라우저 작업은 처음 한 번만 수행되며, 애플리케이션이 실행된 후에는 데이터나 콘텐츠에 대한 요청과 사용자 행위에 대한 응답이 모두 백그라운드에서 수행되기 때문이다.

• SPA는 때문에 말 그래도 단일 페이지로 구성되며 기존의 라운드 트립 애플리케이션과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험(UX)을 제공할 수 있는 장점을 가진다.

• 이러한 장점으로 인해 부가적으로 애플리케이션의 속도의 향상도 기대할 수 있어서 모바일 퍼스트 전략에 부합한다.

❗ 싱글 페이지 애플리케이션의 단점

• 초기 구동 속도
  • SPA는 웹 애플리케이션에 필요한 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
  • 하지만, 애플리케이션에 적합한 기술이므로 트래픽의 감소와 속도, 사용성, 반응성의 향상 등의 장점의 생각한다면 결정적인 단점이라고 할 수 없다.
• 앱 규모가 커지면 자바스크립트 파일이 너무 커진다.
  • 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문이다.
  • 하지만, 코드 스플리팅(code splitting)을 사용해 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다.
• SEO(검색엔지 최적화) 문제
  • 자바스크립트를 사용하여 라우팅을 관리하는 것은 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해가지 못한다는 잠재적인 단점이 따른다. (서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델이기 때문.)
  • 그렇기 때문에 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수도 있다.
  • 하지만 리액트에서는 서버 사이드 렌더링(server-side rendering)을 통해 해결할 수 있다.

react-router :: 3장. 서버사이드 렌더링 | VELOPERT.LOG