CSR(Client Side Rendering) / SSR(Server Side Rendering)

rimmz·2022년 7월 5일

🤔 | QnA

목록 보기

7/13

브라우저에서 실제로 우리가 보는 화면에 필요한 데이터를 어디서 요청하고 웹페이지에 렌더링 하는 방식에 따라 구분이 가능하다.

🔎 Server Side Rendering (SSR)

SSR이란? 서버 사이드 렌더링

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

기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에 페이지에 대한 요청을 하며 서버에는 HTML, View와 같은 리소스 들을 어떻게 보여줄지 해석하고 렌더링하여 사용자에게 반화한다.

SSR 동작 방식

일반적으로 아래와 같이 동작한다.

사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한다.
컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송된다(response).
브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 한다.
브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만든다.
사용자가 페이지를 이동할 경우, 위 동작을 반복한다.

🔎 Client Side Rendering (CSR)

CSR이란? 클라이언트 사이드 렌더링

SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 렌더링을 시작한다.

최초에 1번 서버에 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식

CSR 동작 방식

일반적으로 아래와 같이 동작한다.

사용자가 웹 페이지를 방문하면(request), 브라우저는 최소한의 HTML 파일을 다운로드(response) 한다. 이 HTML 파일은 script, meta, link 등의 태그를 포함하며, 빈 컨텐츠의 index.html 파일이라고 보면 된다.
브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 렌더링한다.

사용자가 페이지를 이동할 경우, 서버에 추가 HTML파일을 요청하지 않고 이미 받은 자바스크립트를 이용하여 렌더링 한다.

📌 SSR과 CSR의 차이점

🔵웹페이지 로드 시간

✔ 초기 페이지 로드 시간(초기 구동 시간)

CSR은 브라우저에서 사용 가능한 컨텐츠로 HTML을 컴파일 하기 전에 기본 HTML, CSS 및 모든 필수 스크립트를 로드하기 때문에 SSR에 비해 느리다.
SSR은 렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 CSR에 비해 빠르다.
(서버에서 페이지 로직 및 렌더링을 실행하면 많은 자바스크립트를 클라이언트에 보내지 않아도 되므로 TTI(Time to Interactive)를 빠르게 수행할 수 있다.)

✔ 페이지 이동시 마다 로딩 시간(인터렉션 속도)

CSR은 이미 모든 지원 스크립트가 사전에 로드되었기 때문에 페이지 이동 시 로드 시간이 줄어든다.
SSR은 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time to First Byte)가 느리다.

⌛ TTV(Time To View)
사용자가 웹 브라우저에서 내용을 볼 수 있는 시점
⌛ TTI(Time To Interact)
사용자가 웹 브라우저에서 상호작용(클릭 등) 할 수 있는 시점

🔵 SEO

CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠를 생성하여, 검색 엔진 크롤러가 해당 페이지에 처음 방문했을때는 빈 페이지이기 대문에 이해할 수가 없다. SEO에 친화적이지 않다.
SSR은 이미 다 만들어진 페이지를 검색엔진 크롤러가 요청에 대한 응답으로 받기 때문에 SEO에 친화적이다.

🔵 서버 자원 사용

CSR은 서버에 부하가 적다.
SSR은 서버에 요청을 하기때문에 서버 자원을 더 많이 사용한다.

💻 SSR과 CSR의 사용 권장 예시

SSR과 SCR은 서로 상반되는 장점과 단점을 가지고 있다.
생성하는 프로젝트의 성격에 따라 필요한 것으로 선택하여 작업하는 것이 좋다.

🤔 CSR 사용

네트워크가 빠른 경우
서버의 성능이 좋지 않을 때
사용자에게 보여줘야 하는 데이터의 양이 많을 때
메인 스크립트가 가벼울 때
SEO 성능이 좋지 않다.
웹 애플리케이션에 사용자와 상호작용할 것들이 많을 때
사용자 경험면에서 유리하다.

검색 엔진 최적화 (SEO, Search Engine Optimization) ? 🧐
검색엔진에서 찾기 쉼게 웹사이트의 정보를 찾기 쉽게 최적화 하는 프로세스를 의미

🤔 SSR 사용

네트워크가 느릴 때
SEO(serach engine optimization)에 친화적이다.
최초 로딩이 빨라야 하는 사이트를 개발 할 때
메인 스크립트가 크고 로딩이 매우 느릴 때
웹 사이트가 상호작용이 별로 없을 때
데이터 요청마다 한 번만 처리가되어도 충분할 때

🔗 참고

https://velog.io/@qkrdudgh052/SSR-CSR-%EC%B0%A8%EC%9D%B4
https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg#client-side-rendering-csr