CSR (Client Side Rendering), SSR (Server Side Rendering)

유수민·2022년 8월 19일
0

지식창고

목록 보기
44/64

📌CSR

  • 클라이언트에서 모든 것을 처리한다. 즉 클라이언트에서 html을 만든다
  • 웹 브라우저가 읽어들일 HTML 코드를 Client측에서 보내준다
  • Client의 행동에 따라 interactive하게 HTML 코드가 반응하는 경우 → Client의 행동에 따라 JS코드가 반응하면서 HTML 코드가 생성/변경/삭제
  • 웹 페이지 초기 로딩 지연시간이 발생합니다.

📖장점

1) 서버의 부담이 적다 (필요하고 변경된 데이터만 받아온다)
2) 초기 로딩 후, 서버에 재요청을 할 필요 없이 클라이언트 내에서 작업이 이뤄지므로 빠르다

📖단점

1) 웹페이지 초기 로딩 지연시간이 발생한다.
2) 검색엔진 최적화가 어렵다.

📌SSR

  • 웹 브라우저가 읽어들일 HTML 코드를 Server측에서 보내준다
  • 웹 페이지 초기 로딩 지연시간을 줄일 수 있습니다.
  • 사용자가 클릭할때마다 서버에 요청하여 서버에서 html을 만든다 → 서버 부하 발생

📖장점

1) 이미 만들어진 html을 보내는 것이라 초기로딩속도가 빠르다
2) 검색엔진최적화기능이다.

📖단점

1) 매번 새로 고침이 발생한다.
2) 서버 부하가 발생한다.

💡 렌더링이란?

  • 렌더링은 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차
  • 실시간으로 웹이 그려지는 과정
  • 이 용어는 일반적으로 HTML, CSS, JavaScript 코드의 사용을 나타낸다.

참고)
https://ivorycode.tistory.com/entry/SSRSever-Side-Rendering과-CSRClient-Side-Rendering
https://xpectation.tistory.com/155

profile
배우는 것이 즐겁다!

0개의 댓글