SSR과 CSR

서버사이드 렌더링(SSR)

서버사이드 랜더링이란?

서버사이드 렌더링(SSR) 은 사용자에게 최초에 보여질 페이지를 서버에서 랜더링해 빠르게 사용자에게 화면을 보여주는 방식을 말한다.

SSR은 서버에서의 렌더링을 마치고, 데이터가 결합된 HTML파일을 내려주는 방식이다. 새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에, 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있다.

동작 방식

1. 서버에서 완전한 HTML 생성
2. 클라이언트에 완성된 HTML 전달
3. 브라우저는 받은 HTML을 즉시 렌더링
4. JavaScript 로드 후 이벤트 핸들러 부착

싱글 페이지 어플리케이션(SPA)

SPA 란?

SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다. 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글페이지 어플리케이션 이라고 한다.

SPA는 SSR과 CSR이랑은 다르게 렌더링 방식을 의미하는게 아닌 어플리케이션 아키텍처 방식을 의미한다

• 애플리케이션 아키텍처를 의미
• 항상 CSR을 사용
• 단일 페이지로만 구성
• 라우팅이 클라이언트에서 처리

즉, 싱글페이지 애플리케이션과 서버에서 페이지를 빌드하는 서버사이드렌더링의 차이는 웹페이지 렌더링의 책임을 어디에두느냐다.

동작 방식

1. 최초 접속 시 필요한 리소스를 모두 다운로드
2. 이후 페이지 전환은 자바스크립트로 처리
3. 필요한 데이터만 API로 요청

클라이언트 사이드 렌더링(CSR)

CSR이란??

CSR 방식은 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤 한다

웹 브라우저(클라이언트)에서 JavaScript를 사용하여 페이지를 렌더링하는 방식
서버로부터 최소한의 HTML과 JavaScript 파일을 받아 클라이언트에서 동적으로 페이지를 구성

동작방식

1. 브라우저가 최소한의 HTML 파일 요청
2. 서버가 빈 HTML과 JS 번들 전송
3. 브라우저가 JS 다운로드 및 실행
4. JS가 DOM 구성 및 데이터 요청
5. 컨텐츠 렌더링 완료

SPA 는 클라이언트 사이드 렌더링이지만 그렇다고 둘이 완전히 같은 말은 아니다

그렇다면 초기렌더링 속도가 빠른 SSR방식이 개발시에 무조건적으로 좋을까??

이에 대한 대답은 '아니다' 이다.
SSR만을 무분별하게 사용한다면 서버의 부하가 커지고 사용자에게 깜빡이는 화면을 계속해서 보여줄수 있기때문에 사용자 경험에서 좋지 않은 경험을 제공해 줄 수 있다

SSR과 SSR의 장단점

SSR

장점:

1. 초기 페이지 로드 속도 빠름
2. 검색엔진 최적화(SEO) 우수
3. First Contentfill Paint(FCP) 가 빠름
4. JavaScript 비활성화 환경에서도 동작

단점:

1. 서버 부하 높음
2. 페이지 이동마다 새로고침
3. 서버 응답 대기 시간 발생
4. 상호작용 시작까지 시간 소요

CSR

장점:

1. 서버 부하 감소
2. 동적 렌더링 용이
3. 부분 업데이트 가능
4. 클라이언트-서버 간 데이터 전송 효율적

단점:

1. 초기 로딩 느림
2. SEO 취약
3. 빈 화면 노출 시간 존재
4. JavaScript 필수