Javascript & Typescript/이해하기

[JS] 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR) 이해하기

adjh54 2022. 8. 24. 15:26
728x170
해당 글은 렌더링에 대해 이해하고, 클라이언트, 서버 사이드 렌더링에 대해서 이해를 돕기 위한 글입니다.

 

 

1) 렌더링이란?

💡 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.

 

 

2) 클라이언트 사이드 렌더링(CRS: Client Side Rendering)

💡 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다.

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

💡 CSR의 동작 과정 - 초기 화면 수행
  1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.
  2. 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달합니다.
    (해당 페이지에는 JS 링크가 포함되어 있습니다.)
  3. 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여서 최종적인 화면을 사용자에게 보여줍니다.
    (해당 부분에서 사용자에게 보여준 뒤 JS를 로드해서 사용자에게 보이는 화면 속도가 느리다.)
  4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행합니다.

 

💡 CSR의 동작 과정 - 페이지 이동 / 동작이 발생하는 경우
  1. 브라우저에서 클라이언트로 요청합니다
  2. 클라이언트에서는 해당 정보를 처리하고 브라우저로 전달합니다
    (* 페이지를 이동하는 경우 클라이언트 내에서 이를 처리합니다.)
  3. 브라우저에서 이를 처리하고 처리된 사항을 그려줍니다.

 

3) 서버 사이드 렌더링(SSR: Server Side Rendering)

💡 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링을 하는 방식을 의미합니다.

 

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

💡 SSR의 동작 과정 - 초기 화면 수행
  1. 사용자가 브라우져에서 요청을 한다(최초 홈페이지 접속)
  2. 클라이언트에서는 이를 확인하고 서버로 요청을 합니다.
  3. 서버에서 데이터를 포함한 미리 구성된 정적 파일(HTML, CSS)을 클라이언트에게 전달합니다.
  4. 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여줍니다.
    (해당 부분에서 미리 구성된 JS까지 수행이 되어 사용자에게 보이는 화면 속도가 빠릅니다.)

 

💡 SSR의 동작과정 - 페이지 이동 / 동작이 발생하는 경우
  1. 브라우저에서 클라이언트로 요청합니다
  2. 요청한 정보를 다시 서버로 재 요청합니다.
    ( 페이지를 이동하는 경우 서버로 요청을 해야 합니다.)
  3. 처리가 완료된 후 클라이언트에 응답합니다.
  4. 클라이언트에서 브라우저로 처리된 사항을 그려줍니다

 

4) 클라이언트 사이드와 서버 사이드 렌더링 비교

 

분류 클라이언트 사이드 렌더링(CSR) 서버 사이드 렌더링(SSR)
장점 - 브라우져 내에서 페이지를 이동하기에 상대적으로 페이지 간 이동 시 속도가 빠르다.
- 필요한 내용과 수정된 데이터에 대해서만 교체를 하기에 속도가 빠르다.
- 새로고침이 없으므로 화면 깜빡임이 발생하지 않아서 사용자에게 친화적이다.
- TTV와 TTI의 공백기간이 짧다.
(사용자에게 보여지는 시점과 사용자에게 서비스하는 시점의 차이가 없다)		 - 서버에서 만들어 둔 페이지를 렌더링하기에 상대적으로 사용자에게 보여지는 초기 페이지 렌더링 속도가 빠르다.

- 빈 페이지가 아닌 화면을 보여주기에 검색엔진 최적화(SEO)에 강점을 가진다.
단점 - 빈 페이지를 출력하고 스크립트의 링크에 따라 다운을 받기에 상대적으로 사용자에게 보여지는 초기 페이지 렌더링 속도가 느리다.
- 초기 페이지를 빈 페이지로 우선 보여주기에 검색엔진 최적화(SEO)에 불리하다.		 - 사용자가 새로고침을 하게 되면 전체 웹사이트를 다시 서버에서 받아와야 하기에 화면의 깜빡임이 발생한다.
- 페이지 호출 시 서버에서 페이지를 구성하는 모든 리소스를 준비해서 보내기에 상대적으로 서버의 부하가 발생합니다.
- TTV와 TTI의 공백기간이 길다.(사용자에게 보여지는 시점과 사용자에게 실제로 서비스하는 시점에 차이가 있다.)

 

 [더 알아보기]
💡 검색엔진 최적화(SEO: Search Engine Optimization) 
- 검색엔진 최적화로 웹 사이트 결과에 더 잘 보이도록 최적화하는 것을 의미한다.
[참고] 검색엔진 봇들이 웹 사이트를 돌아다니면서 크롤링을 할때에 웹 사이트의 HTML을 분석하여 검색하는 웹 사이트를 빠르게 검색할 수 있도록 도와준다.

💡 TTV(Time To View)와 TTI(Time To Interact)
- TTV(Time To View): 사용자가 웹브라우저에서 내용을 볼 수 있는 시점 (사용자가 화면을 보는 시점)
- TTI(Time To Interact): 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점(사용자가 실제로 서비스를 이용하는 시점)

 

 

그리드형