[React]SPA와 라우팅

SPA란 

Single Page Application으로 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다!

유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 

 

어떻게 하나의 페이지 요청으로 전체 웹앱을 사용한다는 걸까??

 

하지만 SPA의 경우 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식이다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하게 된다.

 

페이지가 변경되어도 HTML은 변경되지 않는 것을 볼 수 있습니다. 이처럼 SPA방식에서는 MPA와 달리 페이지가 바뀌더라도 HTML을 다시 서버에 요청하지 않습니다.

 

SPA 장점

• 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다.
• 새롭게 갱신되는 부분만 렌더하기 때문에 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능
• 트래픽의 감소와 속도,반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공하며 모바일 사용이 증가하는 시점에 이는 큰 장점
• 모듈화 또는 컴포넌트별 개발이 용이

 

SPA 단점

• 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느리다.

• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데, 해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적인 문제가 있다.
• 검색엔진 최적화(SEO)가 어렵다.

 

SPA가 검색엔진 최적화(SEO)에 부적합한 이유

SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생할 수 있다.

 

 

 

SPA구현을 위한 프레임워크

SPA방식을 구현하기 위한 프레임워크로는 대표적으로 React, Vue, Angular가 있다! 

 

 

 

 

 

---

 

https://www.ascentkorea.com/seo-for-spa/

https://jongminfire.dev/spa-single-page-application-%EB%9E%80

https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/