1. MPA와 SSR
MPA?
MPA(Multi-Page Application)이란 두 개 이상의 페이지로 구성된 애플리케이션을 의미한다. MPA는 사용자의 클릭과 같이 사용자와의 상호작용이 발생할 때마다 해당 링크로 이동하여 애플리케이션이 다시 새로고침되는 전통적인 방식으로 작동한다.
SSR?
MPA는 렌더링 방식으로 SSR(Server Side Rendering) 방식을 사용한다. SSR 방식이란 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식이다. SSR의 과정은 먼저 클라이언트에서 초기 화면을 로드하기 위해 서버에 요청을 보낸다. 그러면 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답한다.
만약 화면을 구성하는 요소 중 하나만 변경을 원하는 경우를 생각해보자. 클라이언트는 이전과 같이 서버에 요청을 보낸다. 그러면 이전과 마찬가지로 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답한다. 그런데 이 과정에서 클라리언트가 변경하기를 원하는 하나의 요소 뿐만 아니라 화면의 전체 요소를 전부 서버로부터 다시 다운받아 온다. 이러한 이유로 애플리케이션이 다시 시작되고 화면이 깜빡인 이후에 표시된다.
MPA with SSR의 장단점
SSR 방식의 장점은 SEO(Search Engine Optimization, 검색 엔진 최적화)를 제공한다. SEO란 검색 엔진이 웹을 크롤링하면서 페이지의 컨텐츠 색인을 생성하는 과정을 말한다. SSR 방식을 사용하는 MPA는 화면을 구성하는 각각의 페이지가 있기 때문에 SEO에 유리한 장점이 있다. 또한 빠른 초기 로딩을 할 수 있다. 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 뒤에 설명할 CSR(Client Side Rendering) 방식보다 초기 로딩 속도가 빠르다.
SSR 방식의 단점은 불편한 사용자 경험이 있다. 매번 페이지를 요청할 때마다 새로고침이 되기 때문에 사용자 경험이 다소 떨어지게 된다. 또한 서버 부하가 증가한다. 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가된다.
| 장점 | 단점 |
|---|---|
| SEO에 유리 | 불편한 사용자 경험 |
| 빠른 초기 로딩 속도 | 서버 부하 증가 |
2. SPA와 CSR
SPA?
SPA(Single Page Application)란 하나의 페이지로 구성된 애플리케이션을 의미한다.
SPA는 렌더링 방식으로 CSR(Client Side Rendering) 방식을 사용한다. CSR 방식이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식이다. CSR의 과정은 먼저 클라이언트에서 초기 화면을 로드하기 위해 서버에 요청을 보낸다. 그럼 서버는 화면에 표시하는데 필요한 완전한 리소스를 응답한다. 그런데 여기서 CSR 방식이 SSR 방식과 다른 점은 모든 js 파일을 다운 받아야 하기 때문에 초기 로딩 시간이 더 오래 걸린다는 점이다.
만약 화면을 구성하는 요소 중 하나만 변경을 원하는 경우가 CSR 방식에서는 어떻게 될지 생각해보자. 클라이언트는 이전과 같이 서버에 요청을 보낸다. 그러면 서버는 변경을 원하는 하나의 요소에 관련된 리소스만 응답한다. CSR 방식인 SSR 방식과 다르게 화면이 깜빡이지 않고 바로 수정된 데이터가 표시된다.
SPA with CSR의 장단점
CSR 방식의 장점은 빠른 속도 및 서버 부하 감소가 있다. CSR 방식은 변경된 부분과 관련된 데이터만 가져오므로 SSR 방식보다 빠른 속도를 보인다. 또한, 변경된 부분만 요청하므로 서버의 부담을 줄일 수 있다. 그리고 사용자 친화적이다. 페이지 안의 컨텐츠를 클릭하여 다음 단계로 전환하는 과정에서 링크가 없기 때문에 깜빡임 없이 부드러운 이동을 경험할 수 있다.
CSR 방식의 단점으로는 SEO에 불리하다는 점이다. CSR 방식을 사용하는 SPA는 js를 사용하여 사용자와 상호작용 후에 페이지 내용을 로드하기 때문에 웹 크롤러가 페이지를 색인화하려고 하면 내용의 빈 페이지처럼 보이게 된다. 또한, 초기 로딩 속도가 느리다. CSR 방식은 초기에 모든 js 파일을 다운받아와야 하기 때문에 초기 로딩 시간이 오래 걸린다.
| 장점 | 단점 |
|---|---|
| 빠른 속도 및 서버 부하 감소 | SEO에 불리 |
| 사용자 친화적 | 느린 초기 로딩 속도 |
3. 궁금증
SPA에서는 SSR 방식을 사용하지 못하는 건가?
그렇다 사용하지 못한다. 구현하려는 페이지가 여러 개인 경우 전부를 SSR 방식으로 구현하는 것은 불가능하다. 이런 상황이 발생하면 더 이상 SPA가 아니라 MPA가 되어버리기 때문이다. 반대의 경우도 마찬가지이다.
어떤 방식으로 개발해야 할까?
컨텐츠 중심으로 개발해야 한다. CSR 방식을 사용하여 개발한다고 하면 모든 부분을 CSR 방식으로 구현해야하는 것은 아니다. 애플리케이션을 구성하는 부분에 따라 단순 정보 제공과 같은 부분은 SSR 방식으로, 동적인 변화가 필요한 부분은 CSR 방식으로 개발하는 것이 좋다.
참고 및 출처
