개발 공부/JavaScript

220611 [JavaScript] SSR과 CSR

U_D 2022. 6. 11. 19:44

1. SSR(Server Side Rendering)

1) 개념

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

SSR 단계 설명 이미지

#1. User가 Website 요청을 보냄.

#2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다.
(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)

#3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
#4. 클라이언트가 자바스크립트를 다운받는다.
#5. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.

#6. 브라우저가 Javascript 프레임워크를 실행한다.

#7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.

 

2) 단점
  - Blinking Issue : 사용자가 새로고침을 할 경우 전체 웹사이트를 다시 서버에서 받아와야 하기 때문에 화면이
                                없어졌다가 나타나면서 UX 관점으로 볼 때 좋지 않음

  - 서버 과부하 : 사용자가 많아 질 수록 전체 웹사이트를 재용청하게 되는 횟수가 커져 과부하 우려
  - TTV와 TVI의 공백시간
     : SSR 방식은 HTML을 먼져 가져와서 웹사이트를 볼 수 있지만 자바스크립트를 아직 받아 오기 전으로 사용자가
       클릭을 해도 아무런 작동을 할 수 없는 상태가 된다. 그래서 사용자가 사이트를 볼 수 있는 시간(TTV)과 실제로
       인터랙션이 가능한 시간(TVI)의 공백 시간이 꽤 길다는 단점이 있다.

 

 

2. CSR(Client Side Rendering)

1) 개념

SPA 트렌드와 CPU 성능 상승 + JS표준화(리액트,뷰,앵귤러 등의 프레임워크의 발전)와 함께 본격적으로 시작되었다.

*SPA(Single Page Application) : 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용 할 수 있는 애플리케이션

 

SSR과 달리 렌더링이 클라이언트 쪽에서 일어나는 방식
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작
-> 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼
수 있는게 없다.

CSR 단계 설명 이미지

#1. User가 Website 요청을 보냄.

#2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.

#3. 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.😡)

#4. 클라이언트가 자바스크립트를 다운받는다.
#5.다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholder를 보게된다. )

#6. 서버가 API로부터의 요청에 응답한다.

#7.API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.

 

2) 단점
  - 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있음

  - SEO(검색 엔진 최적화 Search Engine Optimization)에 좋지 않음

 

 

3. 사용 권장 예시

1) SSR 사용

  • 네트워크가 느릴 때
    (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
  • SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
  • 최초 로딩이 빨라야하는 사이트를 개발 할 때
  • 메인 스크립트가 크고 로딩이 매우 느릴 때 CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다.
    하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
  • 웹 사이트가 상호작용이 별로 없을 때.

 

2) CSR 사용

  • 네트워크가 빠를 때
  • 서버의 성능이 좋지 않을 때
  • 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
    (로딩창을 띄울 수 있는 장점이 있다.)
  • 메인 스크립트가 가벼울 때
  • SEO에 큰 필요성을 못 느낄 때
  • 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때.
    (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)

 

4. 기타

CSR이나 SSR 말고도 SSG(Static Site Generation)이라는 것도 있다고 한다.

추후에 공부가 필요해 보인다. 아래는 정적 사이트 생성 기술 예시 이미지이다.

 

*참고 링크
: https://ctdlog.tistory.com/46
: https://proglish.tistory.com/216

저작자표시 비영리 변경금지 (새창열림)