SPA

본 내용은 10분 테코톡 주모님의 강의를 토대로 작성하였습니다.

1. MPA(Multi-page Application)

• 두개 이상의 페이지로 구성된 애플리케이션
• 상호작용이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로고침 되는 전통적인 방식
• 렌더링 방식으로 Sever Side Rendering을 채택

2. SSR (Server Side Rendering)

• 서버로부터 완전하게 만들어진 HTML파일을 받아와 페이지 전체를 렌더링

SSR의 동작 방식

• 초기 화면을 로드하기 위해서 서버에 요청을 보낸다.
• 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.
• 일부가 바뀌었더라도 서버는 항상 완전한 리소스를 응답한다.
  • 앱이 다시 시작되고 화면이 깜빡인 후에 표시

3. MPA with SSR의 장점과 단점

장점

• SEO(검색 엔진 최적화)에 유리
  • 화면을 구성하는 각각의 페이지가 있으므로
• 빠른 초기 로딩 속도
  • 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에

단점

• 불편한 사용자 경험
  • 매번 페이지를 요청할때마다 새로고침
• 서버 부하 증가
  • 페이지 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해야함

4. SPA(Single-page Application)

• 하나의 페이지로 구성된 애플리케이션
• 렌더링 방식으로 Client Side Rendering을 채택

5. CSR(Client Side Rendering)

• 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식

CSR의 동작 방식

• 초기 화면을 로드하기 위해서 서버에 요청을 보낸다.
• 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.
• 일부 요소가 바뀌면 클라이언트가 서버에 요청을 보냄
• 서버는 변경된 부분의 리소스만 응답

6. SPA with CSR의 장점과 단점

장점

• 빠른 속도 및 서버 부하 감소
  • 변경된 부분과 관련된 데이터만 가져와서 SSR보다 빠른 속도를 보이고 서버의 부담이 줄어든다.
• 사용자 친화적
  • 깜빡임 없이 부드럽게 이용할 수 있다.

단점

• SEO에 불리
  • JavaScript를 사용하여 사용자와 상호작용 후에 페이지 내용을 로드하
  • 웹 크롤러에게는 빈페이지만 보임
• 느린 초기 로딩 속도
  • 모든 JavaScript 파일을 받아와야 한다.

7. 정리

• 컨텐츠 중심으로 개발을 할 때 단순 정보 제공과 같은 부분은 SSR, 동적인 변화가 필요한 부분은 CSR으로 개발하는 것이 좋다.

Reference

[10분 테코톡] 주모의 SPA