SSR vs CSR

SSR

SSR이란??

Server Side Rendering의 줄임말이다. 단어 그대로 서버 측에서 렌더링을 진행하고 완성된 페이지를 클라이언트에 보내주는 방식을 말한다.
브라우저가 다른 경로로 이동할 때마다 서버는 계속해서 페이지를 재렌더링하며 작업을 반복해야한다.

데이터 처리 방식

웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 렌더링 페이지로 변환 후에 브라우저에 응답으로 보낸다.

언제 사용하는가??

1. SEO가 우선순위인 경우에 CSR보다는 SSR을 사용한다.
2. 첫 화면 로딩이 빨라야 하는 경우, 단위 파일의 용량이 작은 SSR이 적합하다.
3. 웹 페이지와 사용자의 상호작용이 적은 경우에 사용한다.

CSR

CSR이란??

Client Side Rendering의 줄임말이다. SSR의 반대되는 의미로 브라우저의 요청으로 서버에서 웹 페이지의 골격이 될 단일 페이지와 JavaScript파일을 전달받고 렌더링 작업은 클라이언트 측에서 하는 방식이다.

데이터 처리방식

CSR에서 데이터베이스의 데이터가 필요하다면 Fetch와 같은 API를 사용해서 데이터를 가져온다.

언제 사용하는가??

1. 사이트에 풍부한 상호 작용이 있는 경우, CSR은 빠른 라우팅으로 강력한 사용자 경험을 제공한다.
2. 웹 애플리케이션을 제작하는 경우,CSR을 이용해 더 나은 사용자 경험을 제공할 수 있다.

TTI vs TTV

TTI란?

Time to Interact의 약자로 클라이언트가 서버에 요청을 하고 사용자가 브라우저와 상호작용을 할 수 있는 데까지 걸리는 시간이다.

TTV란??

Time to View의 약자로 클라이언트가 서버에 요청을 하고 사용자가 브라우저의 내용을 볼 수 있는 데까지 걸리는 시간이다.

CSR과 SSR에서는??

SSR에서는 HTML파일을 렌더링하고 JS파일을 받기 때문에 TTV가 TTI보다 빨라지면서 둘의 시간차이가 생기게 된다.
SSR을 사용한다면 이 둘의 시간차를 최소화 하는게 중요하다.

CSR에서는 JS파일에 함축되어 들어오기 때문에 TTV와 TTI의 시간차이가 없다.