TIL_React SPA

💡 SPA (Single Page Application)

서버로부터 업데이트가 필요한 데이터만 전달받아 업데이트하는 방식

옛날에 만들어진 웹사이트를 보면, 페이지를 이동할 때마다 HTHL문서 즉, 페이지 전체를 불러오는 것을 볼 수 있다.
이렇게 페이지 이동시마다, 새로고침을 하게되면, 서버에 트래픽이 증가되고 사용자 경험의 저하를 야기했다.

이 점을 보완하고자, 업데이트에 필요한 데이터만 받아 JavaScript가 이 데이터를 조작하여 HTML요소를 생성하여 화면에 보여주는 방식이 개발되었다.

그것이 바로, React SPA 이다.

🔍 SPA의 장점

• 사용자와의 상호작용(Interaction)에 빠르게 반응.
• 서버에서는 요청받은 데이터만 넘겨주면 되기 때문에, 서버 과부하 문제가 현저하게 감소.
• 전체 페이지를 랜더링 할 필요가 없어서 더 나은 유저경험 제공

🔍 SPA의 단점

• SPA의 경우 JavaScript 파일의 크기가 크기 때문에 첫 페이지 로딩 시간이 길다.
• 검색 엔진 최적화에 좋지 않다.
  (HTML에 있는 자료를 분석하는 방식으로 검색엔진이 구동하는데, SPA의 HTML은 거의 비어있기 때문에, 검색엔진이 적절히 동작하지 못함)