SSR vs SPA

fromzoo·2021년 1월 28일
0

렌더링이란 ?

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

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가 보여진 시점에서 바로 인터렉션이 가능하다.
  1. 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형태로 받아와서 동적으로 렌더링하는 방식

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

📝 참고 출처

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

profile
프론트엔드 주니어 개발자 🚀

0개의 댓글