[Web] CSR/SSR

Minji Lee·2024년 1월 11일

CSR MPA SSR spa

CS공부

목록 보기

5/6

[용어]

TTFB(Time to First Byte): HTTP 요청 보낼 경우, 서버에서부터 첫번째 Byte(정보)가 오기까지 걸리는 시간

TTFB = 클라이언트 요청 + 서버의 요청 처리 시간 + 서버의 클라이언트로 응답

FP(First Paint): 첫번째 픽셀이 스크린에 paint되었을 때 시간

FCP(First Contentful Paint): DOM에 속한 컨텐츠 일부가 스크린에 Paint되었을 때 시간

TTV(Time To View): 사용자가 애플리케이션 화면을 보기까지 걸리는 시간

TTI(TIme To Interact): 사용자가 애플리케이션 화면과 상호작용할 수 있기까지 걸리는 시간

MPA(Multiple Page Application)

여러 개의 페이지로 이루어진 애플리케이션으로, 새로운 페이지 요청할 때마다 서버에서 렌더링 된 정적 리소스 전달

전통적인 웹 애플리케이션 개발 방식
여러 개 페이지로 구성되어 있어, 클라이언트에서 서버 요청을 보내면 서버에서 렌더링하고 클라이언트에게 응답을 주어 매번 새로고침을 통해 페이지 구성
SSR 렌더링 방식 채택
PHP, JSP 로 여러개 만들어진 페이지

장점

초기 로딩 속도가 빠름 ⇒ TTV가 빠름
- 서버에서 사전에 렌더링 된 정적 리소스를 받기 때문
- 클라이언트에서는 사전에 렌더링된 페이지만 띄우면 됨
SEO(Search Engine Optimization) 가 쉬움
- 사전에 만들어진 HTML을 받기 때문 → 밑에서 자세하게 설명

단점

초기 화면은 빠르게 보여주지만, 동작을 하지 않을 수 있음
- JS를 다운받기까지 시간이 걸림 → TTI가 TTV보다 오래걸림
- 사용자는 화면만 볼 수 있을 뿐 아무것도 동작하지 못함
깜빡임 발생
- 페이지 이동할 때마다 서버에서 전체 페이지를 다시 받아와야 함
서버 트래픽 상승 위험 존재
- 서버에서 매 요청 시 보내야 할 데이터 사이즈가 커짐
- 서버만 일함

SPA(Single Page Application)

하나의 페이지에서 새로운 페이지를 불러오지 않고, 필요한 부분만 동적으로 변경하는 애플리케이션

데이터 수정, 조회 시 동적으로 페이지 구성하여 페이지 전체적으로 새로고침 되지 않고 부분적으로 변경됨
CSR 렌더링 방식 채택
ex) react, vue, angular
PHP, JSP 로 구성된 정적인 페이지 하나만 존재한다면 그것 역시 SPA

장점

깜빡임 없음 ⇒ 자연스러운 UX 제공
- 초반 렌더링 시 애플리케이션에 필요한 정적 파일 모두 받아오기 때문에 새로고침 할 필요가 없음
화면이 보여짐과 동시에 동작 가능 ⇒ TTV == TTI
서버 부담 줄여줌
- 렌더링 이후 추가적인 정보가 필요한 경우 필요한 리소스만 요청
- 최초 요청 이후 클라이언트에서 렌더링하기 때문에 서버 부담을 분산시켜줌

단점

초기 로딩 속도가 느림
- 애플리케이션에 필요한 리소스를 모두 받아야 하기때문에 시간이 걸림
- TTV가 늦음
SEO가 어려움
- 초기 HTML이 대부분 비어있음
보안 이슈 존재
- 사용자 정보를 클라이언트 측에 관리(쿠키, 스토리지)하는 경우 보안 이슈 발생할 수 있음

SSR(Server Side Rendering)

서버에서 사전에 렌더링된 파일을 클라이언트에게 전송하고, 클라이언트는 이를 즉시 렌더링하는 방식

구동 방식

사용자 요청이 들어오면, 서버는 이를 확인하고 브라우저에게 제공할 HTML 제공
브라우저는 이를 다운로드하고 렌더링하여 화면에 보여줌
정적 리소소(HTML, CSS)가 렌더링된 후, JS를 다운하여 사용자와 페이지 간의 인터렉션 가능하게 함
사용자가 다른 페이지로 이동하는 경우, 위의 1~3과정 반복

렌더링 과정

서버로 요청을 보낸 후, 서버에서 완성된 HTML 파일 응답
브라우저 렌더링 엔진에서 렌더링 과정 처리

① HTML 파싱 후 DOM 트리 생성

② CSS 파싱 후 CSSOM 트리 생성

③ DOM + CSSOM 트리 결합 후, Render 트리 생성

④ UI 백엔드에서 Render 트리 읽고, layout 작업 수행 후 paint 작업 수행

⑤ 브라우저 화면에 출력(⇒ 이때는 동작 아무것도 안함!)
JS 실행
- 스크립트 태그를 통해 JS 파일을 한 줄씩 읽으며 바로 실행

장점

FC, FCP 빠름
- 서버에서 사전에 렌더링 된 HTML 파일을 브라우저에서 로딩
클라이언트 PC 성능에 크게 영향 받지 않음
- 서버에서 완성된 페이지를 브라우저에서 보여주기만 하면 됨

단점

TTFB가 느림
- 페이지 이동할 때마다 매번 새로운 HTML 받아야 함

CSR(Client Side Rendering)

서버에서 최소한의 HTML을 받고, 내부에 위치한 script 태그로 JS 파일 받아 클라이언트에서 페이지 렌더링하는 형식

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="Web site"
    />
    <title>App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

구동 방식

사용자 요청이 들어오면, 브라우저는 최소한의 HTML 파일 다운로드
브라우저는 HTML 내부에 있는 script 태그를 만나면 JS 파일 다운로드
AJAX를 통해 동적으로 컨텐츠 가져오며 화면 렌더링
이후 페이지 이동 시, 별도의 HTML 파일 다시 받지 않고 사전에 받은 JS 파일만 활용하여 렌더링 진행

렌더링 과정

서버로 요청을 보낸 후, 서버에서 완성된 css, js 링크만 존재하는 빈 HTML 파일 응답
브라우저 렌더링 엔진에서 렌더링 과정 처리 & JS 실행

① HTML 파싱 후 DOM 트리 생성

② CSS 파싱 후 CSSOM 트리 생성

③ DOM + CSSOM 트리 결합 후, Render 트리 생성

④ UI 백엔드에서 Render 트리 읽고, layout 작업 수행 후 paint 작업 수행

⑤ 브라우저 화면에 출력(⇒ 이때는 동작 아무것도 안함!)

이때, 스크립트 태그를 통해 JS 파일을 한 줄씩 읽으며 바로 실행

→ 미완성인 UI요소에 하나하나 동적으로 생성하며 그려줌