SSR vs CSR

 

SSR(Server Side Rendering)

- 웹사이트 렌더링이 서버 쪽에서 일어난다.

 

1. 웹 페이지를 방문하면 웹 서버는 사용자의 브라우저에 응답을 보낸다.

2.사용자의 브라우저에서 페이지가 렌더링 되는 한편, 브라우저는 자바스크립트를 다운로드한다.

3. 브라우저가 자바스크립트를 실행한다. 

4. 이제 사이트를 이용할 수 있다.

 

장점

- 첫 로딩이 빠르기 때문에 UX에 좋다.

- 검색 엔진이 콘텐츠를 읽기 위해 자바스크립트를 실행할 필요가 없다. -> SEO에 최적화 되어 있다. 

- 정적 사이트에 좋다.

 

단점

- 페이지마다 매번 다운로드 해야 한다.

- UI가 완전 새로고침 된다. 

- 각 페이지 로드마다 서버를 거쳐야 한다는 점에서 속도 저하가 일어날 수 있다. 

- 보통 더 큰 서버를 요구한다. 

 

CSR(Client Side Rendering) 

- 렌더링이 클라이언트 쪽에서 일어난다.

 

1. 웹 페이지를 방문하면 웹 서버는 사용자의 브라우저에 응답을 보낸다.

2. 브라우저가 자바스크립트를 다운받는다.

3. 브라우저에서 자바스크립트가 실행된다. 

4. 이제 사이트를 이용할 수 있다. 

 

장점

- 다른 페이지로 이동할 때 브라우저에서 즉시 업데이트 될 수 있도록 해준다.

- 한 번 불러온 이후에 UI 전체를 새로고침 할 필요 없이 특정 DOM요소만 다시 렌더링하여 UI를 업데이트 할 수 있다. 

- 페이지 로드마다 동일한 것을 다시 다운로드 받을 필요 없기 때문에 서버에 대한 HTTP 요구가 줄어든다. 

- 많은 페이지, 방대한 사용자 수 일때 좋다.

 

단점

- 그걸 위한 작업(초기 다운로드, 추가 렌더링) 때문에 첫 로딩이 느리다. 

- 검색 엔진이 크롤링을 할 때 페이지의 내용들은 비어있을 수 있다. SEO에 좋지 않다. 

 

 

 

 

https://dev.to/codewithtee/server-side-rendering-ssr-vs-client-side-rendering-csr-3m24

Server-Side Rendering (SSR) Vs Client-Side Rendering (CSR)

 

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/App_structure

프로그레시브 웹 앱 구조 - 프로그레시브 웹 앱 | MDN

https://techstacker.com/server-side-rendering-ssr-pros-and-cons/

Server-Side Rendering (SSR), the Pros & Cons