CSR vs SSR

1. CSR

대표 React 가 CSR(Client-Side-Rendering) 이다.

CSR은 클라이언트(프론트)에서 화면을 구성한다.

 

2. 동작방식

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 서버는 빈 HTML 문서를 전달한다.
3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. 

(이 때 유저는 빈 화면을 보게된다.)
4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다. 

 

3. 장점

• 초기 로드만 완료되면 이후 렌더링이 빠르다.
• 서버에 요청할 것이 거의 없어 서버 부담이 적다. (data 필요할 때만 요청)

 

4. 단점

• SEO에 좋지 않다. (초기 HTML 파일이 비어있기 때문에 봇이 데이터 수집하기 어렵다.)
• 초기 로드가 오래 걸린다.
• 외부 라이브러리가 필요한 경우가 많다.

 

 

5. SSR

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

 

6. 동작 방식

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 서버에서 리액트를 실행 하고 UI를 렌더링 한다.

3. 렌더링된 결과를 통해 브라우저에게 HTML을 제공한다.

(이때 유저는 초기화면을 보게 된다.)
3. 브라우저에서는 JavaScript코드를 다운로드하고 실행한다.

 

7. 장점

• SEO 에 좋다(HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능)
• 초기 로딩 속도가 빠르다.
• 정적인 사이트에 좋다.

 

8. 단점

• 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래 걸리면 유저는 빈 화면을 볼수도 있다.
• 서버에 매번 요청하기 때문에 서버 부하가 크다.
• 페이지를 요청할 때마다 새로고침 되어 UX가 다소 떨어진다.