하루에 한 문제
SSR(Server Side Rendering) VS CSR(Client Side Rendering) 본문
SPA ( Single Page Application)
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식
MPA ( Multiple Page Application)
사용자가 페이지를 요청할 때마다, 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식
SPA에서 사용하는 렌더링 방식이 CSR이고
MPA에서 사용하는 렌더링 방식은 MPA이다.
CSR
- CSR에서는 브라우저가 서버에 HTML과 JS파일을 요청한 뒤, 로드되면 사용자의 상호작용에 따라 JS를 이용해 동적으로 렌더링을 한다.
- 이후에는 필요에 따라 데이터를 서버에 요청해서 받아오기만 하면 된다.
장점
- 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 깜빡거림(새로고침)이 없다, 사용자 경험이 좋다.
- 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다
- 첫 로딩을 제외하고는 SSR에 비해 빠른 페이지 전환속도를 가진다.
단점
- 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
- 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 SEO에 문제가 있다.(구글 같은 경우는 JS를 지원하지만 다른 검색엔진의 경우에는 HTML만 지원하기 때문)
- 쿠키나 localStorage에서 사용자에 대한 정보를 저장해야 하기 때문에 보안에 취약하다.
SSR
- SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식이다.
- JSP/Servlet의 아키텍처에서 이 방식을 사용한다.
장점
- 초기 로딩 속도가 CSR에 비해 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
- JS를 이용한 렌더링이 아니기 때문에 SEO가 가능하다.
단점
- 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 CSR에 비해 좋지 않다.
- 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.
다음은 SSR과 CSR로 렌더링 된 walmart.com 페이지에 대한 정보이다.
홈, 카테고리, 검색 페이지에 대한 첫 번째 서버 응답이다.
SSR은 완성된 HTML을 응답으로 하기 떄문에 문서의 크기가 항상크고 더 느리다.
React 환경에서는 CSR의 단점을 극복하기 위해 React SSR 라이브러리인 Next.js를 사용한다고 한다.
참고
https://d2.naver.com/helloworld/7804182
https://bbbyung2.tistory.com/65
https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md
Comments