과거

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다.

페이지 전체를 불러오는 행위 -> 보통 깜빡인다고 표현한다.

Single Page Application

웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다. 하지만 이때마다 Header 나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다.
사용자 입장에서는 매번 모든 페이지를 불러오면 느린 반응성을 갖게 되서 빡치겠죠??

1990년대 후반에 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발

SPA 기본개념

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

장점

• 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응합니다.
• 서버 입장에서는 요청받은 데이터만 넘겨주면 끝~~ 과부하 문제도 현저히 줄어듬

대표적인 서비스 - Youtube , facebook, Netflix 등등

작동원리 및 단점

브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script tag안에 있는 JavaScript 파일을 다시 받아오는 과정을 거친다.

• 이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일안에 들어있다보니
  자연스럽게 JavaScript 파일이 무거워집니다.
  때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.

• 검색 엔진 최적화가 좋지 않습니다.
  검색 로봇이 자료를 수집할 떄에 웹 페이지의 HTML 문서 내의 각종 태그나 링크 등을 분석하는데, SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못하는 단점이 있다.