SPA(Single Page Application)의 렌더링 방식

SPA(Single Page Application)는 1개의 페이지만 있는 애플리케이션이다.

 

1개의 페이지를 바탕으로 필요한 데이터들을 부분적으로 바꿔가며 보여주어, 여러 페이지를 링크 방식으로 오갈때마다 새로 화면을 그리는 MPA(Multi Page Application)보다 좋은 성능과 사용자 친화적인 UX를 제공하는 등의 여러 장점을 가진다.

 

SPA의 특성과 장단점을 많이 읽어봤지만 크게 와닿지 않았는데,

아직 모바일 중심의 페이지나 앱 개발을 경험해보지 않아서 모바일 환경보다는 PC웹을 중심으로 계속 생각했기 때문이었다.

PC웹에서 '네이티브 앱과 같은 사용성과 성능의 장점'을 엮으려니 마냥 낯설었던 것이다.

 

모바일 환경을 염두에 두고 다시 살펴보니 어느정도 이해가 되었다.

 

 

SPA는 온라인 세상에 모바일의 중요성이 매우 커지면서 모바일 최적화에 대한 니즈를 충족하기 위해 생겨난 기법이다.

크롬, 사파리 등의 브라우저를 통해 사용하는 웹 앱(모바일 웹)을, 다운받아 사용하는 네이티브 앱(모바일 앱) 같은 퍼포먼스를 낼 수 있게 해준다.

 

이는 Angular를 시작으로 React, Vue.js 등의 프론트엔드 기술들을 통해 활발히 구현되고 있다.

 

 

SPA는 Client-Side Rendering이다.

Rendering의 주체에 따라 Server Side Rendering과 Client Side Rendering으로 나뉜다.

여기서 말하는 Rendering은, 요청받은 내용에 대한 HTML을 생성하는 것을 가리킨다.

 

 

사용자가 웹 페이지에 접근할 때

SSR(Server Side Rendering) 은,

서버에서 응답에 대한 HTML을 완성하여 보내주고, 클라이언트는 받은 HTML을 화면에 보여준다.

요청할 때마다 전체 페이지 단위의 새로운 HTML을 통으로 reload하여 rendering하게 되는 전통적인 방식이다.

CSR(Client Side Rendering) 은,

최초 페이지 로딩 시 서버에서 받은 자원으로 전체 페이지를 로딩하고, 그 이후로는 클라이언트에서 ajax방식으로 필요한 데이터만 요청하여 응답으로 받은 데이터를 바탕으로 부분적인 HTML을 rendering하는 방식이다.

 

https://www.excellentwebworld.com/what-is-a-single-page-application/

 

CSR로서의 SPA의 렌더링 과정을 조금 더 살펴보면,

 

최초 페이지 로딩 시 정적 컨텐츠 서버(Apache, Amazon S3, Nginx, Firebase Hosing 등)로 부터 index.html 파일 하나만 먼저 수신, 이후 CSS번들과 JS번들을 수신하여 rendering한다.

• 장점) 배포 시, CSS번들과 JS번들이 포함된 index.html파일 하나만 간단하게 배포 가능
• 단점) javascript가 방대할수록 초기 구동 시간이 오래 걸릴 수 있음  -> webpack의 code splitting으로 해결

 

이후 ajax방식으로 BackEnd서버를 호출하여 필요한 데이터만 송수신한다.

• 장점) 서버와 클라이언트 모두 동일한 언어 사용 및 소스 공유 가능
• 장점) 필요한 데이터만 JSON, XML등의 형태로 주고 받아 네트워크 트래픽의 낭비가 발생하지 않음
  ㄴ SSR은 전체 페이지에 해당하는 HTML을 통으로 주고 받아 낭비가 발생
      (header, footer등의 바뀌지 않아도 되는 데이터가 계속적으로 들어온다)

 

 

https://www.excellentwebworld.com/what-is-a-single-page-application/

 

수신한 데이터를 바탕으로 HTML을 클라이언트에서 생성하여 해당하는 section에 부분적으로 redering한다.

• 장점) 한 페이지 내에서 부분만 갱신되어, reload없이 자연스러운 페이지 이동과 사용자 경험(UX)을 제공
  ㄴ SSR은 매번 통으로 reload(새로고침)되어 UX에 좋지않음
• 장점) 템플릿 연산(HTML에 데이터 삽입)을 클라이언트에서 수행하여 서버 성능이 향상
  ㄴ SSR은 서버에서 수행하여 완성된 HTML으로 응답
• 단점) 검색엔진최적화(SEO) 적용에 어려움  ->  검색엔진 노출이 필요한 페이지들에는 SSR 적용하여 해결

 

검색엔진 최적화(Search Engine Optimization, SEO) 측면에서

일반적으로 검색 봇은 클라이언트에서 rendering되기 전의 HTML에서 정보들을 크롤링 해가는데,

SPA(CSR)인 경우, 최초 로딩되는 index.html을 빈 페이지로 인식하게 된다.

 

이를 커버하기 위해 각종 검색 봇들이 개선되고 있지만 아직 완벽한 커버가 보장되지 않아

보통 검색엔진에 노출이 필요한 페이지에는 SSR을 적용하여 서버에서 연산 후 주는 템플릿을 바탕으로 검색에 노출시킨다.

 

 

Reference

https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/

https://www.excellentwebworld.com/what-is-a-single-page-application/

https://shlrur.github.io/develog/2019/02/14/rendering-on-the-web/

https://velog.io/@haileyself/SPA-Client-Side-Rendering-그리고-Server-Side-Rendering-90k4ar8is1