[TIL][React] 03 SPA(Single Page Application)

Single Page Application

What is SPA?

전통적인 웹사이트는 페이지 이동 시 매번 "페이지 전체"를 불러와야 했다. 웹사이트가 보다 복잡해지고 애플리케이션 형태를 가지게 되면서 사용자와 서비스 사이의 상호작용 크게 증가되게 되었고, 이는 트래픽 증가와 사용자 경험의 저하를 야기했다.

SPA(Single Page Application)는 업데이트가 필요한 부분만 새로 불러온다. HTML 문서 전체가 아니라 업데이트가 필요한 데이터만 받아, JavaScript가 이 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 방식이다.

SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트을 지칭한다.

Youtube, Facebook, Gmail, Airbnb, Netflix 등이 모두 SPA 방식으로 만들어진 대표적인 서비스이다.

 

장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트하기 때문에 사용자와의 interaction에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주기 때문에 서버 과부하 문제가 현저히 줄어든다.
• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 사용자 경험을 제공한다.

 

단점

• JavaScript 파일의 크기가 크기 때문에 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
• 검색 엔진 최적화(SEO)가 좋지 않다. 구글, 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하는데, SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.

 

Copyright © 2022 Song_Artish