[Concept Summary] 서버사이드렌더링, 클라이언트사이드렌더링

🏃Dekay (JuniorDeveloper)·2021년 10월 8일
0

Concept Summary

목록 보기
3/3
post-thumbnail

1. 서버사이드렌더링(Server Side Rendering, SSR)

SSR이란? ✍

  • 기존에 자주 사용하던 방식의 렌더링이다.
  • 클라이언트가 서버에 요청을 하면서 브라우저에 표시된 html을 넘기게 되면 서버는 그 요청에 대한 결과값을 도출하여 만들어진 새로운 html을 클라이언트에 넘겨준다.
    👉 하지만, 매번 새로운 html을 서버에서 넘겨주다보니 반응 속도가 느리다.
  • 많은 정보가 있는 웹에서 인터렉션 시마다 페이지가 전체적으로 새로 렌더링되는 것이라고 이해하자.
    👉 즉, 요청 시 새로고침이 일어난다.
  • 이를 개선 하기 위해 일부 html이나 스크립트만 넘기고 수정하는 방식을 사용했다고 하지만 여전히 클라이언트 요청 > html 리소스 전달 > 서버 결과값 계산 > html 리소스 전달 > 클라이언트 표시의 과정을 거쳐야한다.

2. 클라이언트사이드렌더링(Client side Rendering, CSR)

CSR이란? ✍

  • 전통적인 방식에서의 SPA클라이언트 사이드 렌더링 방식이다.
    👉 쉽게 말해서, 첫 요청할 때 한 페이지 만 불러온다고 생각하자.
  • 사용자가 인터렉션한 화면 영역만 변화가 필요한 경우특정 영역만 정보를 읽어들이고 서버에 전달한다.
  • 그리고 받은 json과 같은 리소스로 view 영역은 클라이언트가 처리하는 방식이라고 이해하자.

3. SSR과 CSR의 렌더링 과정

3.1 SSR 렌더링 과정

  1. 사용자 요청
  2. 서버 html 파일 전송 (view가 사용자에게 보여지지만, 인터렉션 불가능)
  3. 브라우저가 js를 다운로드 (인터렉션 불가)
  4. 브라우저가 프레임워크 실행 (인터렉션 가능)

3.2 CSR 렌더링 과정

  1. 사용자 요청
  2. HTML 파일과 연관된 js를 서버에서 보내준다.
  3. 브라우저가 HTML 파일과 js를 받는다.
  4. 브라우저가 프레임 워크 실행 (view 표시 및 인터렉션 가능)

3.3 차이점

  • 서버 사이드 렌더링은 사용자에게 view를 모두 렌더한 채로 전달되기 때문에 속도가 빠르게 느껴진다.
  • 하지만, js다운로드 및 적용하는 시간때문에 인터렉션이 되기까지 로딩하는 시간이 있다.
  • 클라이언트 사이드 렌더링은 클라이언트 쪽에서 view를 그리기 때문에 서버 사이드 렌더링과 비교하면 느리게 느껴질 수 있다.
  • 하지만, view가 보여진 후 이미지를 클릭하거나 인터렉션을 하게 되면 즉각적으로 클라이언트에서 view를 새로 제공하기 때문에 인터렉션 속도는 빨라진다.

end

profile
Believe you can & you're half way there 🙏

0개의 댓글