TIL 카테고리의 글은 그날 배운 것을 정리하는 목적으로 포스팅합니다. 내용이 잘못되었다면 댓글로 피드백 부탁드립니다
렌더링
어떠한 웹 페이지 접속 시 그 페이지를 화면에 그려주는 것
서버사이드 렌더링(SSR)
- View가 어떻게 보여질지 서버에서 해석해서 보내주는 것
- 서버 측에서 HTML & View를 생성하여 응답하는 방법
- 웹 페이지 요청 시 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식
클라이언트사이드 렌더링(CSR)
- 처음에 하나의 빈 페이지만 서버 측에서 제공하고 View에 대해서는 Client가 자바스크립트를 통해 렌더링하는 방식
- 클라이언트 측에서 View를 생성하는 방법
SSR과 CSR의 차이점
- 초기 View 로딩 속도
- SEO
초기 View 로딩 속도
SSR은 View를 서버에서 렌더링하여 가져오기 때문에 첫 로딩이 매우 짧음.
CSR은 서버에서 View를 렌더하지 않고 HTML을 다운받은 다음 js파일이나 각종 리소스를 다시 렌더링하여 보여주기 때문에 SSR보다는 View를 보기까지 시간이 오래걸림. (로딩이 길어짐)
SEO(Search Engine Optimization)
CSR는 검색엔진 최적화 문제가 있음.
CSR로 이루어지는 사이트는 View를 생성하는데 자바스크립트가 필요함!
그 전까지는 HTML 내용이 비어있기 때문에 웹 크롤러들은 내용을 알 수 없고 제대로된 데이터를 수집할 수 없게됨.
정리
서버사이드 렌더링 (SSR)
- 초기 로딩 속도 빠름
- SEO 유리
- View 변경 시 서버에 계속 요청하므로 서버에 부담
클라이언트사이드 렌더링(CSR)
- 초기 로딩 속도 느림
- 초기 로딩 후에는 서버에 다시 요청할 필요 없이 클라이언트 내에서 매우 빠름
- SEO 문제가 있음
SSR, CSR의 문제를 해결하는 방법
첫번째 페이지 로드는 서버사이드 렌더링을 사용하고 그 후 모든 페이지 로드는 클라이언트사이드 렌더링을 사용한다.