🎯 목표 : SSR과 CSR의 개념과 차이점 이해
📒 SPA(Single Page Application) & MPA(Multi Page Application)
- 웹 애플리케이션의 구현 방식중 SPA , MPA 방식이 있다. SSR과 CSR의 개념과 함께 공부해보면 이해하기 좋은 것 같아 같이 정리하기로 하였다.
📌 SPA ?
- Single Page Application의 약자다. 풀 네임만 봐도 하나의 페이지로 된 애플리케이션 이란 것을 알수 있다.
- 하나의 페이지란 하나의 HTML을 말하고 , 단 하나의 HTML로 웹 페이지를 구동 하기에 매 요청마다 새로운 HTML 페이지를 Load 할 필요가 없다.
- 그래서, 서버쪽 랜딩 페이지의 코드를 작성할 필요가 없다.
- 예를 들면, Facebook, Twitter , Gmail, Goole Maps 등 많은 웹사이트가 SPA 방식으로 구현 되었다.
📌 SPA 장점과 단점?
- 브라우저에서 디버깅 하기 쉽다.
크롬의 DevTools를 통하여 네트워크 동작을 모니터링 할수 있으며, 페이지의 요소들과 페이지와 연관된 데이터를 확인할 수 있다. - 로컬 저장소의 활용성이 우수해진다.
애플리케이션이 하나의 요청을 하고 전송 받은 모든 데이터를 저장하게된다. 즉, 모든 데이터를 제공 받았다면, 오프라인에서 조차 페이지를 사용 가능하다는 말이다. 네트워크가 끊겨 불안정 하더라도 전송받은 데이터 내에서는 오프라인에서 사용 가능하다. - User 친화적인 환경이 구성된다.
페이지를 첫 로딩 이후에 새로운 페이지를 로딩할 필요가 없다. 즉 첫 로딩 이후에는 새로운 페이지의 데이터를 받기 위해 로딩 시간이 없다는 말이다. 이로써, User는 데스크탑 애플리케이션을 사용하는 듯한 느낌을 받을수 있다. - 단점으로는, SEO(검색 엔진 최적화)가 쉽지 않다.
- SPA는 첫 로딩 이후에는 AJAX를 통해 부분적으로 로딩 된다. 첫 로딩 이후 일부의 정보만 변경하는 방법으로 작동하며 이는 비동기 방식으로 데이터 교환이 이루어진다. 비동기 방식으로 데이터 교환을 하게되면, 검색 엔진의 데이터 수집이 어렵게 된다.
📌 MPA ?
- Multi Page Application의 약자다. HTML 페이지가 여러개로 이루어진 애플리케이션이라 보면 되겠다.
- 각 페이지를 이동 할때마다, 서버에 요청을 하고, 페이지 데이터를 전송받아 브라우저에 업데이트 한다.
📌 MPA 장점과 단점?
- SEO 관리가 용이하다.
전송 받은 HTML에는 SPA와 다르게 모든 페이지에 각 메타 테그 데이터를 포함 하고 있기에 SEO 친화적이라 할수있다. - 여전히 많은 사이트 들은 MPA로 작성 되어 있다. 개발자 측면에서 봤을때,
MPA를 구현하기에 많은 학습 데이터가 형성 되어 있다는 말이다. - 단점으로는, 각 페이지를 이동 할때마다 데이터를 불러오기 때문에 로딩 시간이 발생한다. User 친화적이지 못한 부분이다.
- 프론트엔드와 백엔드가 확연히 분리되어 있지 않고 서로 엮여있다.
📌 정리
- 위의 장단점만 봤을때, SPA를 사용하는 측면이 단점을 보완할수 있다면, 웹 애플리케이션을 구현하기에 좋은 방법이 될수 있겠다.
- 이를 보완하기위해 여러 솔루션이 있으며, 적절한 솔루션을 사용하여 서비스의 목적에 따른 구현 방식을 따르면 되겠다. 이러한 솔루션들은 다음에 조금 더 공부하여 정리 할 예정이다.
📒 SSR(Server Side Rendering)
📌 SSR ?
- Server Side Rendering의 약자로, 서버로 부터 랜더링 준비를 끝마친 상태의 파일들을 받아와 브라우저에 출력한다.
- 위 그림에서 볼수 있듯, 첫 요청을 한 이후 JS 파일을 받기 전에 User는 페이지를 볼수 있는 상태가 된다.
- 일반적으로 MPA는 SSR 방식을 채택하여 웹 애플리케이션을 구현한다.
📌 SSR의 특징
- 전송 받은 HTML의 페이지에는, CSR과 다르게 페이지의 모든 내용을 담고있다. 그래서 첫 로딩시, HTML이 브라우저에 출력되고 이후에 동적 프로그램 데이터가 전송되어 웹 애플리케이션은 동적으로 사용할수 있게 된다.
이 과정에서 유저는 첫 페이지를 빠르게 볼수 있지만, 동적인 동작을 할수 없는 약간의 지연 시간이 있다.
\= Time To View & Time To Interact 간의 시간 간격이 있다. - 또한 페이지를 이동할때 다시 서버로 부터 데이터를 전송 받아야 하기에, 깜빡인 후 페이지가 랜더링 되는 것을 볼수 있다.
- 페이지를 이동할때 마다 서버로 부터 데이터를 요청하기 때문에 페이지를 구성하는 모든 리소스를 준비해야되는 서버측 부하가 증가한다.
❗장점
- SEO 검색 엔진 최적화에 유리하다.
- 빠른 초기 로딩 속도❗단점
- Time To View & Time To Interact 간의 시간 간격이 있다.
- 깜빡인 후 페이지가 랜더링.
- 서버측 부하가 증가
📒 CSR(Client Side Rendering)
📌 CSR ?
- Client Side Rendering의 약자로, 사용자의 요청에 따라 데이터를 전송해주며 SSR과 다르게 클라이언트 쪽에서 랜더링이 된다.
- 즉, HTML과 JS 파일을 전송 받게 되면 클라이언트에서 랜더링을 하여 출력하게 된다.
- 위 그림에서 User는 요청후 HTML 파일을 전송 받고, JS 파일을 전송받은 다음, 랜더링 된 이후에 페이지를 볼수 있다.
- 일반적으로 SPA는 CSR 방식을 채택하여 웹 애플리케이션을 구현한다.
📌 CSR의 특징
- 첫 로딩 후 클라이언트 쪽에서 모든 데이터를 전송 받았기 때문에 모든 페이지 로딩이 SSR에 비해 빠르다.
- 그러나, 첫 로딩시 전송 받은 HTML의 페이지에는, SSR과 다르게 HTML은 비어있다. body의 JS와 같은 동적인 프로그래밍에 의해 브라우저에 업데이트 된다. 결국, 먼저 비어있는 HTML을 전송 받더라도 동적으로 구현된 프로그램을 전송받아 랜더링 되기 전까지는 아무것도 출력되지 않는다.( = 첫 페이지 로딩이 느리다)
- SEO에 친화적이지 못하다.
크롬의 DevTools에서 CSR로 구현된 페이지를 viewers로 통해 확인하면 비어있는 페이지가 보이게된다. 즉, 검색 엔진은 비어있는 페이지를 탐색할수 없기때문에 SEO 친화적이지 못하다. - 클라이언트 쪽으로 대부분의 데이터를 전송 해주어 서버측 부하가 적다.
❗장점
- 첫 페이지 외 페이지 이동은 빠르다.
- 서버측 부하가 적다.
- User 친화적이다.❗단점
- SEO에 불리하다.
- 초기 로딩 속도가 느리다.
📌 When To Use ?
결론적으로는 서비스 콘텐츠와 프로잭트에 따라 적절한 방식을 사용해야한다.
👉 SSR : ex) Naver, The NewYork Times 등
- SEO 검색 엔진 상위 노출이 필요할때.
- 페이지가 사용자와 상호작용이 적을때.
- 첫 로딩이 빠르고 단일 파일의 용량이 작을때.
- 페이지 마다 데이터가 자주 바뀔때.
👉 CSR : ex) 아고다, Facebook 등
- SEO의 중요도가 떨어질때.
- 검색 엔진 상위 노출 보다, 페이지 내의 사용자 데이터 보호가 더 중요할때.
- 페이지 내에서 사용자와 풍부한 상호 작용이 있는 경우.
- 보다 나은 사용자 경험을 제공하고자 할때.
Reference
SPA & MPA https://www.excellentwebworld.com/what-is-a-single-page-application/
컴퓨터가 할일은 컴퓨터가