서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

 

서버사이드 렌더링(SSR)

 

서버사이드렌더링(Server Side Rendering)은 서버가 사용자에게 보여줄 페이지를 모두 구성 한다음, 사용자에게 페이지를 보여주는 방식.

서버가 완전히 만들어진 HTML 파일을 구성하기 때문에

클라이언트 사이드 렌더링(CSR)보다 페이지 구성시 초기 로딩 속도가 빠르다는 장점이 있다.

 

하지만 서버를 이용해서 페이지를 구상하는 한계점이 있기때문에 페이지를 이동할 때마다 새로고침이되고, CSR보다 페이지 전환 속도가 느리다는 단점이 있다.

 

 

서버사이드 렌더링(SSR) 동작원리

1. 사용자의 페이지 요청시 서버는 리소스를 확인해 페이지내에 있는 스크립트와 HTML컨텐츠를 컴파일 및 준비

2. 컴파일된 HTML을 클라이언트 브라우저로 응답해줌

3. 브라우저는 HTML을 다운로드하고 사용자가 사이트를 볼 수 있게 해줌.

4. 브라우저가 자바스크립트를 실행하면서 페이지를 동적으로 만들어줌

 

 

 

서버사이드 렌더링(SSR)의 장.단점을 정리해보면,

장점

- 초기 로딩속도가 클라이언트 사이드 렌더링(CSR)에 비해 빠르다.

- SEO(Search Engine Optimization) 구성에 친화적이다.

 

단점

- 페이지 이동시 서버를 거쳐 페이지를 구상하기 때문에 클라이언트 사이드 렌더링(CSR)보다 느리다

- 로딩하는 화면이 무겁다면 사용자 경험(UX)를 해칠 수 있다.

 

---

 

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

 

클라이언트 사이드 렌더링(CSR)은 웹 브라우저에서 페이지를 렌더링해 서버를 거치지않고 클라이언트에서 바로 처리하는 방식이다.

 

클라이언트 사이드 렌더링(CSR)은 SPA(Single Page Application)의 등장으로 나타났다.

SPA(Single Page Application)은 하나의 페이지 안에서 필요한 부분만 렌더링해 변경해서 불러오는 방식이다.

 

전체적인 HTML 화면이 있으면 사용자가 요청할때마다 필요한 부분의 화면과 내부의 데이터를 바꿔주는 형식이다.

클라이언트 사이드 렌더링(CSR)은 모든 HTML, CSS, JS파일이 전부 로드되어야 화면이 보여지는데, 이 때문에 첫 페이지 로딩이 매우 긴편이다. 

첫 로딩은 느린편이지만 페이지를 이동할 때 서버를 거치지 않고 클라이언트(브라우저)에서 처리하기 때문에 서버사이드 렌더링(SSR)에 비해 페이지 간 이동이 매우 빠른 편이다.

 

하지만 클라이언트 사이드 렌더링(CSR)은 SEO에 매우 취약하다. 

자바스크립트 코드로 되어있는 코드를 웹 크롤러가 읽지 못하기 때문이다. 

 

이렇기 때문에 CSR을 쓸지 SSR을 사용할지는 개발하는 프로젝트에따라 선택해야한다.

 

 

클라이언트 사이드 렌더링(CSR) 동작원리

1. 사용자가 웹 페이지를 방문하면 브라우저는 먼저 빈껍데기인 index.html 과 최소한의 html (script , meta 태그 등)의 파일을 응답해준다.

2. 브라우저는 자바스크립트 번들을 다운로드하고 동적 컨텐츠들을 가져와서 파싱하고 렌더링한다. 

3. 사용자의 페이지간 이동이 일어날 때 이미 다운로드한 자바스크립트를 이용해 렌더링한다.

 

장점

- 페이지 간 이동이 서버 사이드 렌더링(SSR)에 비해 빠르다. (클라이언트에서 처리하기때문)

- 서버를 호출할때 전체 UI를 다시 렌더링 할 필요가 없다. (이미 초기에 모두 로드 했기 때문에)

 

단점

- 첫 페이지 로딩 시에만, 모든 파일(HTML,CSS, 스크립트)를 읽어오기 때문에 느리다.

- SEO(Search Engine Optimization) 구성에 친화적이지 않다. (검색 엔진 크롤러가 지원이 되지않음)

- 첫 페이지 로딩 시 사용자 경험(UX)가 좋지 않다. (로딩이 완료할때 까지 빈 화면만 보게 될수도있음.)

 

 

 

 

 

 

 

도움이 된 글 : 

https://d2.naver.com/helloworld/7804182 [네이버 d2 기술블로그]

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

https://velog.io/@chkim132/React-CSR%EA%B3%BC-SSR