SPA

# MPA (multi page application)

전통적인 웹사이트(MPA)에서는 페이지이동시 매번 HTML파일로 된 페이지 전체를 불러와야했다.
전통적인 웹사이트는 페이지 전체를 로딩하고
이와같이 페이지 전체를 불러오는 행위를 깜빡인다고 표현한다.

# 전통적인 웹사이트의 한계와 단점
매번 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰다.
사용자와 서비스 사이의 상호작용 증가는 트래픽 증가와 사용자 경험의 저하를 야기했다.

# SPA (single page application)

-HTML문서 전체가 아니라 필요한 데이터만 받아, 자바스크립트를 통해 변경된 부분만 업데이트하여 다시 보여주는 방식

-menu와 footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다.업데이트가 필요한 부분만 새로 불러온다.
-업데이트에 필요한 데이터만 받아, 자바스크립트가 이 데이터를 조작하여 html요소를 생성하여 화면에 보여주는 방식
-서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹사이트를 말한다.
ex)유튜브
-웹사이트가 보다 복잡해지고 사용자와 더욱 많은 상호작용이 필요해 만들어졌다.

#spa장점
-사용자의 행동에 빠르게 반응한다
-서버입장에서는 과부하 문제도 줄일수있다.
-전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

 

#렌더링: 코드를 브라우저에 보여준다라고 생각하면된다.

#spa단점
-javascript 파일의 크기가 크다. 때문에 이 자바스크립트 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
-검색 엔진 최적화(SEO)가 좋지 않다. 
검색엔진최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 말한다.
구글이나 네이버 같은 검색엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.
하지만 spa에서도 검색엔진 최적화에 대응할수 있도록 검색 엔진이 발전하고 있어서 점차 이 단점은 사라지고 있는 추세이다.