SSR, CRS & 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가 잘되지 않는다면 자신이 만든 웹어플리케이션의 내용이 검색엔진에 제대로 표시되지 않고, 그만큼 사용자의 유입이 줄어든다.

정리

서버사이드 렌더링

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

클라이언트 렌더링

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

📝 참고 출처

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