SPA (Single Page Application)

SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성해, 사용자와 소통하는 어플리케이션이나 웹사이트를 말한다.

최초 페이지에 접속했을 때 모든 데이터를 가져온 후 변화되는 것에만 새로운 데이터를 가져온다.

이는 빠른 로딩속도를 가져오기 때문에 사용자경험(UX)를 증대시킬 수 있다.

SPA를 구현하기 위한 대표적인 프레임워크로는 React, Vue, Angular가 있다.

최근 SPA가 트렌드지만 단점도 당연히 존재한다.

최초 페이지 접속 시 모든 데이터를 가져오기 때문에 MPA보다 로딩속도가 조금 느리고 SEO에 적합하지 않다.

 

MPA는 Multi Page Application으로 서버에 최초 접속을 하게 되면 페이지의 소스를 가져온 후, 사용자의 요청이 있어 아주 작은 부분이라도 바뀌게 된다면 전체 페이지를 다시 가져오게 된다.

바뀐 거는 사진 하나인데 전체페이지가 바뀜

 

SEO는 Search Engine Optimization로 '검색 엔진 최적화'로 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.(쉽게 말해, 페이지가 얼마나 검색이 잘 되는지)

SPA로 페이지를 구현하면 하나의 페이지에 자바스크립트로 사이드를 구성하게 되는데 자바스크립트를 읽기 못하는 검색엔진은 크롤링을 할 수 없다. 때문에 많은 데이터가 인식되지 않아 검색에 취약하다.

 

SPA로 제작한 웹페이지는 기본적으로 CSR(Client-Side Rendering)방식으로 구축된다. 즉 서버에서는 HTML, JS 등 모든 재료를 다운 받은 후 클라이언트 단에서 렌더링을 하는 방식을 말한다. SEO를 위해서는 SSR(Server-Side Rendering) 방식으로 웹페이지를 구현해야 한다.

대표적인 SSR프레임워크는 React의 Next.js, Vue의 Nuxt, Angular의 Angular Universal이 있다.

 

 

 

사진, 내용 출처

SPA기반 웹사이트의 SEO