서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점

🐞서버 사이드 렌더링

서버 사이드 렌더링(SSR)은 서버 측에서 렌더링을 하는 방식이다. 클라이언트가 서버에 콘텐츠를 요청하면, 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS코드를 응답한다. 브라우저에서는 JS코드를 다운로드하고, HTML에 JS를 연결한다.

🐧  클라이언트 사이드 렌더링

클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 렌더링하는 방식이다. 클라이언트가 서버에 콘텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답한다. 클라이언트는 연결된 JS링크를 통해 서버로부터 다시 JS파일을 다운로드한 뒤, JS를 통해 동적으로 페이지를 만들어 브라우저에 보여준다.

 

빈 뼈대만 있는 HTML을 받아오기 때문에 웹 크롤러 봇 입장에서 색인할만한 컨텐츠가 존재하지 않아 SEO에 불리하다는 단점이 있다. 또 브라우저가 JS파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다는 단점이 있다.

하지만, 초기 로딩 이후 페이지 일부를 변경할 때에는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동속도가 빠르다.

서버는 HTML뼈대를 넘겨주는 역할만 수행하면 되므로 서버 측의 부하가 적고, 클라이언트 측에서 연산과 라우팅 등을 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다는 장점도 있다.