SSR 과 CSR 의 차이

들어가며

SSR(Server Side rendering) 과 CSR(Client Side Rendering) 은 페이지 렌더링 방식을 경정하는 개념이다.

이 개념들을 이해하고 차이가 뭔지 알아보고자 한다.

 

SSR & CSR

SSR(Server Side Rendering)

서버 사이드 렌더링은 클라이언트 요청에 따라 HTML 파일을 서버에서 렌더링해서 완성된 HTML 파일을 클라이언트에 전달한다. 그 후 브라우저는 서버로부터 완성된 HTML 을 받아서 화면에 표시한다.

출처 : https://prismic.io/blog/client-side-vs-server-side-rendering

 

서버 사이드 렌더링은 다음과 같은 단계로 진행된다.

1. 서버는 웹 페이지에 대한 요청을 받으면 필요한 데이터를 검색한 후에 해당 데이터를 HTML 템플릿에 붙인다.
2. 서버는 페이지에 대한 HTML 마크업을 생성하고 콘텐츠를 렌더링하고 필요한 스타일을 적용한다.
3. 페이지를 렌더링 한 후에 서버는 렌더링된 페이지를 브라우저에 전달한다.
4. 브라우저에 전달된 HTML 은 즉시 렌더링된다. (그러나 상호작용은 불가)
5. 브라우저가 JS 를 다운받고, 실행한다.
6. JS 가 실행된 후에는 웹 페지는 상호작용이 가능하다.

장점

• 필요한 부분의 HTML 과 JS 파일만 불러오므로 초기 로딩속도가 빠르다.
• SEO에 유리하다.

단점

• JS 파일이 모두 다운로드되어야 인터랙션이 가능해서 인터랙션까지의 시간이 걸린다.
• 페이지 이동 시 깜박거림이 있고, 이동할 때 마다 서버에 요청을 하므로 서버 비용이 증가하고 느려질 수 있다.

 

CSR(Client Side Rendering)

클라이언트 사이드 렌더링은 HTML  와 자바스크립트를 로드한 후, 브라우저에서 자바스크립트를 실행해서 화면을 그리는 방식이다.

출처 : https://prismic.io/blog/client-side-vs-server-side-rendering

 

클라이언트 사이드 렌더링은 다음과 같은 단계로 진행된다.

1. 서버가 웹 페이지에 대한 요청을 받으면 브라우저에 CSS 및 자바스크립트 링크가 포함된 빈 HTML 파일을 브라우저에 보낸다.
2. 브라우저는 HTML 을 파싱해서 DOM 트리를 구성한다.
3. 브라우저는 CSS 와 자바스크립트 리소스를 다운로드한다. 그런 다음 웹 페이지를 렌더링한다.
4. 브라우저는 자바스크립트 코드를 실행하여 애니메이션, 폼 검증, API로부터 가져온 데이터와 같은 동적 콘텐츠 및 상호작용 기능을 추가한다.
5. 버튼 클릭이나 폼 제출 같은 상호작용이 발생하면 브라우저는 페이지의 일부를 리렌더링하고 업데이트 한다.

장점

• 초기 로딩 이후에 페이지 이동이 빠르고, 깜박거림이 없다.
• 변경이 필요한 부분만 요청하므로 서버의 비용이 SSR 에 비해 적다
• 로딩이 완료되면 바로 상호작용을 할 수 있어서 동적 데이터 처리에 적합하다.

단점

• 초기에 렌더링에 필요한 JS를 불어와야 하므로 로딩속도가 느리다.
• SEO 에 불리하다.

 

SSR과 CSR 비교

특징	SSR	CSR
초기 로딩 속도	빠름	느림
페이지 이동 속도	느림	빠름
SEO	SEO 친화적	추가 설정 필요
서버 부하	높음	낮음

 

사용 사례

SSR

• 초기 로딩 속도가 중요한 페이지
• SEO 가 중요한 페이지(ex. 쇼핑몰)

CSR

• SEO 와 초기 속도가 덜 중요한 페이지(ex. 사내 페이지 등...)
• SPA 로 구현해야하는 페이지
• 사용자와의 상호작용이 많은 애플리케이션

 

 번외 ( chat gpt 대답)

gpt 한테 물어보니 이렇게 사례를 알려줬다. 참고하면 좋을 것 같다.

 

Reference

 

https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/

SSR or CSR - what is better for Progressive Web App?

 

https://prismic.io/blog/client-side-vs-server-side-rendering

Client-side Rendering (CSR) vs. Server-side Rendering (SSR)

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

[ 기술 스터디 ] SSR과 CSR의 차이