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

렌더링 : 어떠한 웹 페이지 접속시 그 페이지를 화면에 그려주는 것

서버사이드렌더링

- SSR

- 일반적 웹페이지 구동

- 요청시마다 새로고침이 일어나며 서버에 새로운 페이지 요청을 함

- View가 어떻게 보여질지 또한 서버가 해석함

- 웹에서 제공되는 정보가 많아질 수록 문제점이 생겨남

- 첫 로딩이 짧음

 

클라이언트사이드렌더링

- CSR

- 하나의 빈 페이지만 서버측에서 제공

- Client에서 자바스크립트를 통해 렌더링 하는 방식

- SPA

- 초기 View 까지 로딩 시간이 오래걸림

- 로드 후에는 인터렉션이 가능

 

사용자 가능 시점에는 큰 차이는 없으나 

SEO 문제가 발생

SEO : Search Engine Optimization / 검색 최적화 문제

CSR에서는 초기에 빈페이지만 렌더링 되기 때문에 웹 크롤러들이 내용을 알 수 없다

SEO가 잘 되지 않는다면 웹 애플리케이션 내용이 검색 엔진에 표시되지 않고 그 만큼 사용자의 유입이 줄어든다

 

개선방향

첫번재 페이지 로드에는 서버사이드 렌더링을 사용

그 이후 모든 페이지 로드에는 클라이언트 사이드 렌더링 활용