SPA란 페이지가 하나인 앱입니다.
기존의 웹 사이트들에서는 사이트를 이동시마다 서버에서 html 파일을 컴파일 해서 보내주었고
브라우저에서는 새로고침과 함께 변경된 html을 렌더링 해주었습니다.
비교적 간단하게 구성된 옛날의 페이지들은 이러한 과정에 크게 문제가 없었습니다.
그러나 점점 웹 페이지의 용량은 커졌고 이를 서버에서 매번 감당하기에는 어려움이 생겼습니다.
그래서 spa가 등장하게 됩니다.(두둥)
spa에서는 최초 요청시 서버로부터 html을 전달받습니다.
이후의 요청은 ajax를 통해 사용자에게 보여주기 위한 데이터들을 json 형식으로 받아오고 이를 동적으로 사용자에게 보여줍니다.
필요한 부분만 요청 & 응답을 받게되고 이를 사용자에게 보여줍니다.
이제 서버는 수고를 덜었습니다.
spa에서 라우팅은 html 5의 history api를 이용합니다.
history.back(), history.forward(), history.pushState(), history.replaceState()와 같은 메소드들을 통해 화면 이동이 일어난것처럼 사용자에게 보여줄 수 있습니다.
페이지 이동후에는 js의 실행과 ajax를 통해 필요한 데이터와 화면을 구성하여 보여줄 수 있을 것입니다.
spa는 html 렌더링을 서버에서는 하는 것이 아니라 client측에서 하기 때문에 csr 방식으로 렌더링 하는것 입니다.
이를통해
1. 페이지의 필요한 부분만 보여줄 수 있습니다. 트래픽은 줄일수 있고 페이지 이동은 더 빨라질수 있습니다.
2. 모듈화나 컴포넌트를 통해 유지보수를 쉽게 하고 개발 속도를 빠르게 해줍니다.
3. 프론트와 백엔드의 업무가 분리될 수 있습니다.
하지만
1. 최초 로딩이 느릴수 있습니다. 필요한 html과 js를 모두 다운로드 받고 js가 실행되어야 사용자에게 보여지기 때문입니다.
2. seo에 대응할 수가 없습니다. js를 이용해 metadata가 동적으로 바뀝니다. 하지만 검색엔진의 크롤러 봇들은 js를 실행시키지 않습니다. seo를 위해서는 ssr방식을 사용하여야 합니다.
'Frontend > Javascript' 카테고리의 다른 글
| Javascript mouseup, mousedown, mousemove, touchstart, touchend, touchmove (0) | 2022.03.20 |
|---|---|
| Javascript keydown, keyup, keypress (0) | 2022.03.19 |
| CSR vs SSR (0) | 2022.03.19 |
| Javascript debounce, throttle (0) | 2022.03.19 |
| Javascript script async vs defer (0) | 2022.03.03 |