SSR vs SPA

렌더링이란 ?

웹페이지 접속시 페이지를 화면에 그려주는 것

SSR

• Server side Rendering (서버사이드렌더링)
• 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.
• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지를 보여주는 방식
• 기술의 발전으로 웹에서 제공되는 정보량이 많아지고, 여러 문제점이 발견되면서 SPA가 등장하게 된다.

CRS & SPA

• SPA는 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션을 의미한다.
• 이러한 방식을 클라이언트사이드 렌더링(CRS) 방식이라고 한다.
• 전통적인 SSR은 SPA에 비해 성능이 뒤떨어져있다.

주의할점

• CRS != SPA
• 전통적인 웹페이지 렌더링 방식 != SSR

전통적인 웹페이지 방식이 SSR 방식을 사용한 것이고, SPA가 CSR 방식을 사용한것!

SSR vs CSR

1. 초기 View 로딩 속도

• SSR의 경우에는
  - view를 서버에서 렌더링하여 가져오기 때문에 첫 로딩이 매우 짧다.
  - 물론 JS 파일을 모두 다운로드하고 적용하기 전까지는 어떤 인터렉션에도 반응하지 않지만, 사용자 입장에서는 로딩 속도가 짧다고 느낄 수 있다.

• 반면 CSR의 경우에는
  - 서버에서 View를 렌더하지 않고 HTML을 다운 받은 다음 JS 파일이나 각종 리소스를 다운 받을 후 브라우저에 렌더링하여 보여주기 때문에 SSR보다는 초기 View를 볼 수 있기까지 시간이 걸린다. 즉 로딩이 길어진다.
  - but View가 보여진 시점에서 바로 인터렉션이 가능하다.

2. SEO 검색 엔진 최적화 차이점

• seo = 검색 엔진 최적화
• CSR방식으로 이루어진 사이트는 View를 생성하는데 자바스크립트가 필요하다. 그 전까지는 HTML의 내용은 비어있기 때문에 웹 크롤러들은 내용을 알 수 없다 => 제대로된 데이터를 수집할 수 없다.
• but 구글에 경우 자바스크립트를 해석에서 크롤링해줌 그렇지만 전세계사람들이 구글만 쓰는 것이 아니기에 문제점으로 볼 수 있다.
• 만약 seo가 잘되지 않는다면 자신이 만든 웹어플리케이션의 내용이 검색엔진에 제대로 표시되지 않고, 그만큼 사용자의 유입이 줄어든다.

(추가) 웹에서의 SPA(Single Page Application)

• 단일 페이지로 구성된 웹어플리케이션
• 첫 로딩시 전체페이지를 로딩하고 필요한 데이터만 JSON형태로 받아 동적으로 렌더링하는 방식

기존 웹환경에 비해 SPA가 부각되는 이유?

• 기존환경에서는 화면 이동시에 화면에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.
• 반면 SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고, 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

SPA의 단점

• 처음 화면을 로딩할때, 모든 화면이 미리 준비되어 있어야하기 때문에 로딩에 시간이 걸린다.

SPA의 특징

• SPA는 컴포넌트들이 모여 한페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념
• 대표적인 SPA라이브러리로 React.js, Vue.js, Augular2등이 씨다.
• 그 외 번들링 팩, 트랜스컴파일링을 지원하기 위한 Node.js 기반의 Webpack,Babel 등도 SPA를 위한 주요라이브러리 중 하나.

정리

서버사이드 렌더링

• 초기 로딩속도가 빠르고
• SEO에 유리하지만,
• View 변경시 서버에 계속 요청을 해야하므로 서버에 부담이 크다.

클라이언트 렌더링

• 초기 로딩속도는 느리지만,
• 초기 로딩 후 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다.
• but SEO에 대한 문제가 있다.

SPA란
첫 로딩시 전체 페이지를 로딩하고 필요한 데이터만 JSON형태로 받아와서 동적으로 렌더링하는 방식

첫 화면 로딩시에 모든 화면이 미리 준비되어 있어야하기 때문에 로딩 시간이 걸린다.

📝 참고 출처

서버 사이드 렌더링, 클라이언트 사이드 렌더링