[Web] SSR과 CSR (feat. MPA와 SPA)

오늘은 SSR과 CSR의 개념 및 차이점 등을 정리했다.

또 그와 관련된 개념인 MPA와 SPA에 대해서도 함께 작성해보았다.

 

📎 MPA와 SPA

MPA와 SPA는 웹 어플리케이션을 구성하는 방법을 분류한다.

 

MPA (Multi Page Application)

MPA는 여러 페이지로 구성된 웹 어플리케이션을 의미한다.

사용자의 클릭 등 인터랙션이 발생할 때마다 서버로부터 새로운 html을 받아온 후,

해당 링크로 이동하여 페이지 전체를 새로 렌더링 하는 전통적인 웹 페이지 구성 방식이다.

 

SPA (Single Page Application)

SPA는 하나의 페이지로 구성된 웹 어플리케이션을 의미한다.

브라우저에 최초 한 번 페이지 전체를 로드하고,

이후부터는 필요한 특정 부분만 Ajax를 통해 데이터를 바인딩 하는 방식으로 이루어진다.

👉 SPA가 바로 현재 웹 개발의 트렌드!

---

📎 SSR (Server Side Rendering)

SSR의 개념

• MPA가 사용하는 렌더링 방식이다.
• 서버로부터 완전하게 만들어진 html을 받아와 페이지 전체를 렌더링한다.

 

SSR의 동작 과정

• 클라이언트가 초기 화면 로드를 위해 서버에 요청을 보낸다.
• 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고
  css까지 전부 적용하여 렌더링 준비를 마친 HTML, 그리고 JS 코드를 브라우저에 응답한다.
• 브라우저에서는 전달 받은 페이지를 바로 띄우고, JS 코드를 다운로드하여 HTML에 실행시킨다.

👉 클라이언트가 새로운 요청을 보낼 때는 다시 1~6번의 과정을 모두 거친다.

 

SSR의 장단점

• 장점
  • SEO(검색엔진최적화)에 유리하다.
    모든 데이터가 이미 HTML에 담겨진채로 브라우저에 전달되기 때문
  • 초기 로딩이 빠르다.
    화면을 렌더하기 위한 필수적인 요소를 먼저 가져와서 보여주기 때문
• 단점
  
  • 사용자 경험이 떨어진다.
    페이지를 요청할 때마다 새로고침되기 때문에 화면 깜빡임이 생기며,
    TTV(Time To View)와 TTI(Time To Interact)간의 시간차가 생김
    사용자가 버튼을 클릭하는 등의 액션을 취해도 아무런 반응을 보이지 않을 수 있음
  • 서버측의 부하가 증가한다.
    페이지를 요청할 떄마다 바뀔 필요 없는 부분들까지 모두 렌더링해야 함

---

📎 CSR (Client Side Rendering)

CSR의 개념

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

 

CSR의 동작 과정

• 클라이언트에서 초기화면 로드를 위해 서버에 요청을 보낸다.
• 서버는 화면에 표시하는데 필요한 완전한 리소스로 응답한다.
  ✔️ JS까지 한 번에 진행하므로 SSR에 비해 초기 로딩 시간이 오래걸림

👉 새로운 요청이 있을 때는 1, 2번 과정을 거치지 않고 3, 4번만 거쳐 특정 부분만을 재구성한다.

 

CSR의 장단점

• 장점
  • 속도가 빠르고, 서버의 부하가 감소한다.
    변경이 필요한 부분에 대한 데이터만 가져오기 때문
  • 사용자 친화적이다.
    SSR의 문제점이었던 화면 깜빡임이 없음
• 단점
  
  • SEO에 불리하다.
    자바스크립트를 사용하여 사용자와 상호작용을 통해 페이지의 내용을 로드하므로
    웹 크롤러가 페이지를 색인화하려고 하면, 빈 페이지처럼 보이게 되기 때문
  • 초기 로딩 속도가 느리다.
    모든 js 파일을 가져와야 하므로 초기 로딩 시간이 오래 걸림

---

📎 SSR vs CSR 선택 기준

서비스, 프로젝트, 콘텐츠의 성격에 따라 달라진다.

 

SSR을 사용하면 좋은 경우

• 상위 노출이 필요할 때
• 누구에게나 동일한 내용을 노출해야 할 때
• 페이지마다 데이터가 자주 바뀔 때

 

CSR을 사용하면 좋은 경우

• 보다 나은 사용자 경험을 제공하고 싶을 때
• 상위노출이 중요하지 않을 때
• 사용자에게 보여줘야 하는 데이터의 양이 많을 때 (로딩 창 보여줄 수 있음)

 

👉 이 둘의 단점을 해결하고, 장점을 살리고자 Next.js가 등장했다.

첫 페이지는 SSR 방식으로 백엔드 서버에서 렌더링하여 데이터가 채워진 HTML을 받아 SEO 문제를 해결,

그 다음 페이지 부터는 CSR 방식을 적용하여 데이터 부분만 갱신하여 서버의 부하도 줄이도록 할 수 있다.

---

참고

• https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/
• https://proglish.tistory.com/216
• https://miracleground.tistory.com/entry/SSR%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-CSR%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81