[WEB] SPA (Single-Page Application)

SPA (Single-Page Application)

- 단일 페이지로 구성된 웹 어플리케이션을 말한다.

 

출처: https://www.digitalclaritygroup.com/single-page-application-make-sense/
화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다. (CSR(Client-side rendering) 방식)	기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.

[ 장점 ]

1. 하나하나 화면 전체를 렌더링 할 필요가 없기 때문에 화면 이동이 빠르다.

2. 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.

 

[ 단점 ]

1. 유저가 실제로 방문하지 않을수도 있는 페이지의 렌더링과 관련한 스크립트도 불러오기 때문에, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커져 초기 로딩 속도가 길어진다.

• 우리가 스마트폰에서 어플리케이션을 처음 다운받고 실행할 때의 경험을 생각해보면 이해가 빠르다. 예를 들어 카카오톡을 처음 실행할 때 어플리케이션은 렌더링에 필요한 스크립트들을 로딩하고, 그 동안 우리는 카카오톡 로고를 보게 된다.
• 해결: Code Splitting 을 사용하여 라우트 별로 파일들을 나눠, 트래픽과 로딩속도를 개선 할 수 있다.

2. 검색엔진 최적화(SEO)가 되지 않는다.

• 클라이언트 렌더링 방식에서 SEO는 항상 이슈다. React, 혹은 view 렌더링이 JavaScript 위주로 돌아가는 클라이언트 렌더링 방식 프로젝트는, JavaScript 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 않는다. 이렇게 클라이언트 렌더링만 될 경우엔 검색 엔진 크롤러가 어플리케이션이 지닌 데이터들을 제대로 수집하지 못해 빈 페이지로 인식한다. 검색엔진에 제대로 노출이 되지 않으니 웹페이지에의 유입이 줄어드는 결과가 발생한다.
•  해결: SSR로 대응 가능하다. SSR은 view를 서버에서 전부 렌더링해 내려주어 html에 모든 컨텐츠가 저장되어 있기 때문에 크롤러가 데이터를 수집해 갈 수 있다.

3. 핵심로직이 JavaScrpit로 구현된다.

• SPA는 비즈니스 로직을 서버에서 돌려 최종 HTML을 전달 받던 기존과 달리, 필요한 데이터만 전달 받아 많은 비즈니스 로직을 클라이언트에서 수행하기에 핵심 로직이 노출될 수 있다.
• 해결:
• 1. 서버에서 핵심 로직을 수행하여 클라이언트에서의 수행을 최소화 시킨다.
• 2. 중요한 유효성 검사는 서버 클라이언트 모두에서 수행한다.

4. 위의 모든 것을 해결하기 위해 어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.

 

 

 

 

도움이 된 정보들 

 

칼럼:

 

https://velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

https://velog.io/@josworks27/SPA-%EA%B0%9C%EB%85%90

SPA(Single Page Application)에 기초 개념

https://m.mkexdev.net/374

SPA 단점에 대한 단상