[Web] SPA : 싱글 페이지 App

 

 

💡 MPA : 멀티 페이지 애플리케이션 - 2개 이상의 페이지(html)로 구성된 App

클릭을 하면 서버에서 새로운 전체 페이지를 다시 보내줌

 

💡 SPA : 싱글 페이지 애플리케이션 - 1개 페이지로 구성된 App

클릭을 하면 서버에서 필요한(바뀌는) 부분반 보내줌

 

장점

1. 자연스러운 사용자 경험 가능 : 깜빡임 X

2. 웹 성능 향상 : 필요한 리소스반 받아 부분적 렌더링, 서버 부담 줄어듬

3. 개발 생산성 향상 : 컴포넌트별 개발 용이(협업 엄무 분담, 유지 보수)

 

단점

1. 첫 랜딩 속도가 느림

2. 검색엔진최적화(SEO)에 취약,

SEO :검색 엔진에서 상위에 노출되도록 최적화하는 과정

(html 파일을 읽어 검사하는데 비어있으니 불리함)

 

💡 Hashed Routing: hash 값이 변경됨에 따라 페이지 이동,
클라이언트 내부적으로만 이용할 수 있는 url 구조

💡  query string : 주문(요청) , 아래 내용은 내림차순으로 1페이지 보내줘!

 

⬇️ URL 구조

해시 # 이전까지의 url 을 브라우저는

호스팅서버에서 데이터(문서) 를 GET 받아오는 것으로 인식한다.

 

👀 왜 Hashed Url Path 가 바닐라 자바스크립트 SPA 에 적용되야 하나?

브라우저 라우팅 방식은 새로고침 시 /path 부분까지 포함해 서버에 새 페이지를 요청하기 때문

이 경우 SPA 가 아니게 된다.