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

 

렌더링( Rendering )이란?

서버로부터 HTML, CSS, Javascript 등 개발자가 작성한 문서를 받아 브라우저에 출력되는 과정으로 여기서 서버 사이드 렌더링과 클라이언트 사이드 렌더링은 어떻게 하면을 렌더링 하는지 차이가 있다.

 

 

클라이언트 사이드 렌더링(CSR: Client Side Rendering)

서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미한다.

 

[동작 과정]
1. 사용자가 홈페이지를 최초로 접속한 경우 클라이언트는 이를 확인하고 서버로 요청한다
2. 서버는 빈 페이지(HTML, CSS)를 클라이언트에 전달한다
3. 전달 받은 클라이언트에서 해당 화면을 그려주고 스크립트를 다운로드하여서 최종적인 화면을 사용자에게 보여준다
   - 이 부분에서 사용자에게 보여준 뒤 JS를 로드해서 사용자에게 보이는 화면 속도가 느리다
4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행한다
   - 페이지 이동이나 동작이 발생한 경우
   - 브라우저에서 클라이언트로 요청 -> 클라이언트에서는 해당 정보를 처리하고 브라우저로 전달(페이지 이동의 경우 클라이언트 내에서 이를 처리) -> 브라우저에서 이를 처리하고 처리된 사항을 그려준다

 

 

React에서의 클라이언트 사이드 렌더링

클라이언트가 서버에서 HTML, CSS, JS파일을 내려 받는다. 서버는 JSON 파일만 보내주는 역할을 하며 HTML을 그리는 역할은 클라이언트의 JS에서 수행한다. 사용자의 행동에 따라 필요한 부분만 불러온다.

React는 빌드할 때 코드를 전부 하나의 JS 파일로 만들어 준다. (babel을 이용하여 transfile, webpack으로 번들링) 클라이언트에서는 이런 bundle.js 파일을 통해 페이지를 그릴 수 있게 된다.

초기에 JS파일을 읽어서 무엇을 그려야할지 판단하고 그리는 작업을 하는 동안 딜레이가 생기게 되지만 그 이후 작업에 있어서 서버의 의존도가 없이 클라이언트 혼자 그릴 수 있고 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 빠른 화면 전환이나 인터랙션이 가능하다.

그러나 index.html에 단순히 뼈대만 있기 때문에 검색 엔진의 봇들이 크롤링(crawling)할 때 아무 내용이 없어서 SEO에 취약하다는 단점이 있다. SEO(검색 엔진 최적화)에 취약하지만 그전에 앞서 개발하려는 서비스 전체가 SEO가 필요한지 고민해 봐야 한다.

 

서버 사이드 렌더링 (SSR: Server Side Rendering)

서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식을 의미한다.

SSR은 요청시 마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. HTML, CSS, JS를 직접 올리는 것이 아니라 해당 파일을 만들어 낼 수 있는 로직을 올리고 서버에서 해당 로직을 실행해서 최종적으로 HTML, CSS, JS를 만들어 브라우저에 전달한다. 만들어진 HTML은 이미 DOM이 다 구성되어 있고 로직을 올린다는 것은 결국 실행 가능한 Function을 올린다는 것이고 이는 백엔드에 해당이 된다.

즉 SSR은 브라우저에서 보는 파일을 올리는 것이 아니고 브라우저에서 보는 파일을 만들어 낼 수 있는 로직을 포함한 파일을 서버에서 올려서 해당 파일을 만들어내는 것으로 생각하면 된다.

이미 DOM이 다 구성된 파일을 브라우저가 받기 때문에 바로 그릴 수가 있어서 초기 구동 속도가 매우 빠르다. DOM에 이미 내용도 전부 다 있어서 SEO에도 좋다.

 

[동작 과정]
1. 사용자가 브라우저에서 요청, 최초 홈페이지 접속
2. 클라이언트에서는 이를 확인하고 서버로 요청
3. 서버에서는 데이터를 포함한 미리 구성된 정적 파일(HTML, CSS)를 클라이언트에게 전달한다
4. 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여줌
   - 해당 부분에서 미리 구성된 JS까지 수행이 되어 사용자에게 보이는 화면 속도가 빠르다
   - 페이지 이동이나 동작이 발생하는 경우
   - 브라우저에서 클라이언트로 요청 -> 요청한 정보를 다시 서버로 재 요청 -> 처리가 완료된 후 클라이언트에 응답 -> 클라이언트에서 브라우저로 처리된 사항을 그려줌

 

CSR vs SSR

	클라이언트 사이드 렌더링 (CSR)	서버 사이드 렌더링 (SSR)
장점	- 브라우저 내에서 상대적으로 페이지 간 이동 시 속도가 빠르다 - 필요한 내용과 수정된 데이터에 대해서만 교체를 하기에 속도가 빠르다 - 새로고침이 없으므로 화면에 깜빡임이 발생하지 않아서 사용자에게 친화적이다	- 서버에서 만들어 둔 페이지를 렌더링하기에 상대적으로 사용자에게 보여지는 초기 페이지 렌더링 속도가 빠르다 - 빈페이지가 아닌 화면을 보여주기 때문에 검색 엔진 최적화(SEO)에 강점을 가진다
단점	- 빈 페이지를 출력하고 스크립트의 링크에 따라 다운을 받기에 상대적으로 사용자에게 보여지는 초기 페이지 렌더링 속도가 느리다 - 초기 페이지를 빈페이지로 우선 보여주기에 검색 엔진 최적화(SEO)에 불리하다	- 사용자가 새로고침을 하게 되면 전체 웹사이트를 다시 서버에서 받아와야 하기 때문에 화면에 깜빡임이 발생한다 -페이지 호출 시 서버에서 페이지를 구성하는 모든 리소스를 준비해서 보내기에 상대적으로 서버의 부하가 발생한다