프론트 서버가 데이터 없이 먼저, 하나의 JS, Html, CSS, img파일을 브라우저에 보내준다. 화면은 보여주지만 데이터가 없기 때문에 로딩창을 띄우고있다. 그 후 브라우저가 백엔드서버로 바로 요청을 보내고 백엔드서버가 DB에서 실제데이터를 꺼내와 브라우저로 데이터를 바로 넘겨준다. 브라우저는 데이터를 받아 조립하고 화면을 그려줌.
⇒ HTML과 자바스크립트 등은 초기 로딩때 다 들고오고 데이터만 필요할 때 가져옴.
브라우저(react)가 프론트서버(node)에 blog페이지를 요청하면 프론트서버가 백엔드 서버(node)에 게시글들을 요청한다. 백엔드 서버가 DB에 실제 게시글 데이터들을 요청하고 백엔드가 데이터를 받으면 프론트서버에 넘겨주고 프론트서버에서 데이터와 html을 합쳐 브라우저로 보여준다.
초기로딩 속도 빠름 But, page 이동 시에는 CSR보다 느림. = page를 요청할 때마다 중복되는 파일을 내려받아야 하기 때문
⇒ SSR(Server Side Rendering)을 사용할 때에는 변화가 있을 때마다 새롭게 전체 페이지를 다시 로드
View를 서버에서 부터 렌더링하여 가져오기 때문에 서버에 부담을 준다.
⇒ Html, CSS, JS와 데이터까지 서버에서 다 채워서 완전한 페이지를 가져옴.
SSR과 CSR의 차이점은 View를 Server에서 아니면 Client 에서 생성하는 차이와, 검색엔진 최적화의 문제가 있습니다.