[Web]CSR과 SSR

CSR(Client Side Rendering)

클라이언트측에서 화면을 렌더링하는 방식이다.

 

작동 방식

1. 브라우저가 서버에 HTML문서를 요청하면 서버는 요청받은 HTML을 반환한다
2. 브라우저가 서버에 필요한 데이터를 요청하고 서버는 요청받은 데이터를 반환한다.
3. 브라우저는 자바스크립트를 다운받는다. (로딩중)
4. 화면이 활성화된다.

장단점

• 장점
  • 첫 로딩에 HTML과 static파일을 다 받으면 동적으로 렌더링하기 때문에 UX(User Experience)가 뛰어나다.
  • 서버에 요청하는 횟수가 훨씬 적어 서버 부담이 줄어든다.
• 단점
  • 모든 HTML과 static 파일이 로드될 때까지 기다려야 한다.
  • SEO(검색 엔진 최적화) 문제가 발생할 수 있다.

 

SSR(Server Side Rendering)

서버측에서 화면을 렌더링하는 방식이다.

 

작동 방식

1. 브라우저가 서버에 요청을 보내면 서버는 완전하게 만들어진 HTML파일을 반환한다.
2. 브라우저는 자바스크립트를 다운받는다. (화면은 보여지지만 비활성화 상태)
3. 화면이 활성화된다.

장단점

• 장점
  • 초기 로딩 속도가 빨라 사용자가 컨텐츠를 빨리 볼 수 있다.
  • 모든 검색엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.
• 단점
  • 페이지를 요청할 때마다 새로고침되기 때문에 UX가 다소 떨어진다.
  • 서버에 매번 요청하기 때문에 트래픽, 서버 부하가 커진다.

 

 

https://n-square.tistory.com/40

 

https://velog.io/@namezin/CSR-SSR#spa%EC%97%90%EC%84%9C-ssr%EC%9D%84-%EA%B5%AC%EC%84%B1%ED%95%A0-%EC%88%98%EB%8A%94-%EC%97%86%EB%8A%94%EA%B0%80

---

참고 자료

• medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
• velog.io/@namezin/CSR-SSR#spa%EC%97%90%EC%84%9C-ssr%EC%9D%84-%EA%B5%AC%EC%84%B1%ED%95%A0-%EC%88%98%EB%8A%94-%EC%97%86%EB%8A%94%EA%B0%80
• n-square.tistory.com/40