[10분 테코톡] 🍻주모의 SPA 정리

MPA (Multi-Page Application)

- 두 개 이상의 페이지로 구성된 애플리케이션

 

멀티페이지 어플리케이션은 사용자의 클릭과 같이 인터렉션이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로고침되는 전통적인 방식으로 작동한다.

 

 

멀티페이지 어플리케이션은 렌더링 방식으로 서버사이드 렌더링을 채택한다. html 파일을 받아와 페이지 전체를 렌더링하는 방식이다.

 

 

SSR (Server Side Rendering)

 

 

클라이언트에서 초기 화면을 로드하기 위해서 서버에 요청을 보낸다.

 

 

서버는 html로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.

 

화면을 구성하는 요소 중에 나무만 변경한다면 클라이언트는 이전과 같이 서버에 요청을 보낸다.

 

 

이전과 마찬가지로 서버는 html로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.

 

 

그래서 앱이 다시 작되고 화면이 깜빡인 후에 표시된다.

 

장점

1) SEO(검색 엔진 최적화)에 유리

서버 사이드 렌더링을 채택하는 멀티페이지 어플리케이션은 화면을 구성하는 각각의 페이지가 있기 때문에 SEO에 유리한 장점이 있다.

* SEO : 검색엔진이 웹을 크롤링하면서 페이지에 컨텐츠 색인을 생성하는 과정

 

2) 빠른 초기 로딩 속도

서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 클라이언트 사이드 렌더링 보다 초기 로딩 속도가 빠르다.

 

단점

1) 불편한 사용자 경험

매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 다소 떨어진다.

 

2) 서버 부하 증가

페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가된다.

 

 

SPA (Single-Page Application)

- 하나의 페이지로 구성된 애플리케이션을 의미

 

싱글페이지 어플리케이션은 렌더링 방식으로 클라이언트 사이드 렌더링을 채택한다.

 

 

 

CSR (Cilent Side Rendering)

- 클라이언트 사이드 렌더링란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식

 

클라이언트에서 초기 화면을 로드하기 위해 서버에 요청을 보낸다.

그럼 서버는 화면에 표시하는데 필요한 완전한 리소스를 응답한다.

그런데 여기서 클라이언트 사이드 렌더링 방식이 서버 사이드 렌더링 방식과 다른 점은 모든 JS파일을 다운 받아야 하기 때문에 초기 로딩 시간이 더 오래 걸린다는 점이다.

 

 

화면을 구성하는 요소 중에 나무만 변경한다고 가정하면 클라이언트는 이전과 같이 서버에 요청을 보낸다.

 

 

그럼 서버는 변경된 부분인 나무와 관련된 리소스만 응답한다.

 

 

화면이 깜빡이지 않고 바로 수정된 데이터가 표시된다.

 

장점

1) 빠른 속도 및 서버 부하 감소

클라이언트 사이드 렌더링 방식은 변경된 부분과 관련된 데이터만 가져오므로 서버 사이드 렌더링보다 빠른 속도를 보인다. 또한, 변경된 부분만 요청하므로 서버의 부담을 줄일 수 있다.

 

2) 사용자 친화적

페이지 안의 컨텐츠를 클릭하여 다음 단계로 전환하는 과정에서 링크가 없기 때문에 깜빡임 없이 부드러운 이동을 경험할 수 있다.

 

단점

1) SEO(검색 엔진 최적화)에 불리

클라이언트 사이드 렌더링을 채택한 싱글페이지 어플리케이션은 자바 스크립트를 사용하여 사용자와 상호작용 후에 페이지 내용을 로드하기 때문에 웹 클롤러가 페이지를 색인화 하려고 하면 내용이 빈 페이지처럼 보이게 된다.

 

2) 느린 초기 로딩 속도

클라이언트 사이드 렌더링은 초기에 모든 JS파일을 다운받아와야 하기 때문에 초기 로딩 시간이 오래 걸린다.

 

 

SPA에서는 SSR을 못하나요? NO

 

구현하려는 페이지가 여러개인 경우 전부를 서버 사이드 렌더링으로 구현하는 것은 불가능하다. 이런 상황이 발생하면 더 이상 싱글페이지 어플리케이션이 아니라 멀티 페이지 어플리케이션이 되어 버리기 때문이다. 반대의 경우도 마찬가지 이다.

 

 

그럼 어떤 방식으로 개발해야 할까?

컨텐츠 중심으로 개발해야 한다.

 

클라이언트 사이드 렌더링 방식을 채택하여 개발한다고 했을 때 모든 부분을 클라이언트 사이드 렌더링 방식으로 구현해야하는 것은 아니다. 애플리케이션을 구성하는 부분에 따라 단순 정보 제공과 같은 부분은 서버 사이드 렌더링으로, 동적인 변화가 필요한 부분은 클라이언트 사이드 렌더링 방식으로 개발하는 것이 좋다.

---

참고

https://www.youtube.com/watch?v=vM_zQLnlyKw&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC