웹페이지 구동방식_ SSR과 CSR, 그리고 React

 

|  SSR (Server Side Rendering)

1. 브라우저 : 서버로 웹페이지 요청

2. 프론트서버 : 백엔드서버로 data 요청

3. 백엔드서버 : DB에서 data를 받아와 JSON 과 같은 형식으로 반환

4. 프론트서버 : 반환한 data로 HTML, CSS, JS 제공

5. 브라우저 : 응답받은 HTML을 화면에 보여줌

 

SSR의 특징은 html을 서버에서 그려준다는 것이다.

 

 

|  CSR (Client Side Rendering)

1. 브라우저 : 프론트 서버에 웹페이지 요청

2. 프론트서버 : 데이터가 없는 문서(HTML, CSS, JS, img...)를 반환 (웹페이지에 사용되는 모든 파일을 받아온다.)

3. 브라우저 : 필요에 따라 백엔드 서버에 data 요청

4. 백엔드서버 : DB에서 필요한 data를 받아와 JSON 형식으로 반환

5. 브라우저: data를 받아와 2번에서 받아온 JS파일에서 동적으로 DOM을 구성하여 렌더링

 

CSR의 특징은 프론트세버에서 받은 JS파일에서 사용자에게 필요한 data에 따라 html 파일을 그린다.

즉 html을 클라이언트에서 그려준다.

 

 

 

React와 같은 SPA의 경우, 다른 작업을 하지 않을 시 CSR을 사용한다.

 

CSR을 사용했을 때 장점은 웹페이지임에도 어플리케이션과 같은 사용자 경험을 제공한다는 것이다.

또한 백엔드 서버에서 data를 받아오는 동안 로딩창을 보여주어(보통 html을 받아오는 시간보다 data를 받아오는 시간이 오래걸린다.) 빈화면으로 기다리지 않을 수 있으므로 사용자 만족도가 높아진다.

하지만 처음에 모든 page를 다 받아와 사용자와의 인터페이스에 맞추어 화면을 보여주기 때문에, 초기로딩속도가 길다.또한 첫 화면이 로딩창이기때문에 검색엔진이 data를 찾지 못한다.

 

 

이 특징들을 토대로 SSR과 CSR을 비교하는 표를 만들어 보면 다음과 같다.

	SSR	CSR
초기로딩속도	현재 페이지만 다운받으므로 초기 로딩속도가 빠르다.	모든 파일을 다운받아오므로, 초기 로딩속도가 느리다.
SEO(검색엔진)	웹페이지에 대한 정보가 처음에 포함되어있으므로 데이터 수집 용이	크롤러가 데이터를 수집하지 못한다. (똑똑한 구글크롤러는 예외)
서버부담	서버와 잦은 응답으로 서버에 부담이 크다.	data 요청이 있을 때만 서버에 요청하므로 서버에 부담이 적다.

 

React에서는 위와 같은 단점(긴 초기로딩속도, SEO)을 보완하기 위해 

1. 서버사이드렌더링(SSR) 2. 코드스플리팅을 사용한다.

 

React는 CSR이라고 했는데 SSR을 사용하면 CSR의 특징을 버리는 것이 아닌가, 할 수 있지만,

1번은 첫번째 접속시에만 SSR을 사용하고, 그 이후 페이지들은 CSR을 사용하여 페이지를 제공하는 방법이다.

첫 페이지에 SSR을 사용하므로(현재 페이지를 완전히 받아오므로) 초기로딩속도가 빠르며 검색엔진에게 충분한 정보를 제공할 수 있다.

또한 그 이후 페이지들은 CSR로 제공하므로 SPA의 장점을 함께 가질 수 있다.

2. 코드스플리팅이란 컴포넌트들을 나눠 방문하는 page만 다운받는 것이다. 이를 통해 초기로딩속도를 높일 수 있다.

 

 

 

참고
https://kyj7337.github.io/posts/SSRCSR