[React] Server Side Rendering이란?

 

오늘은 Server Side Rendering에 대해 알아보겠습니다.

 

 

 

[ Server Side Rendering (SSR) ]

서버사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 UI를 서버에서 렌더링 하는 것을 의미합니다. 즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 

 

 

📌 서버 사이드 렌더링의 장점 

서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 클라이언트 대신 렌더링을 해 주면 검색 엔진이 페이지의 내용을 제대로 수집해 갈 수 있습니다. 구글 검색 엔진은 다른 검색 엔진과 달리 검색 엔진에서 자바스크립트를 실행하는 기능이 탑재되어 있으므로 제대로 페이지를 크롤링해 갈 때도 있지만, 모든 페이지에 대해 자바스크립트를 실행해 주지는 않습니다. 따라서 웹 서비스의 검색 엔진 최적화를 위해서라면 서버 사이드 렌더링을 구현해 주는 것이 좋습니다. 즉, 검색 엔진 (SEO) 최적화가 가능합니다. 

 

또한, 서버 사이드 렌더링을 통해 초기 렌더링 성능을 개선할 수 있습니다. 예를 들어 서버 사이드 렌더링이 구현되지 않은 웹 페이지에 사용자가 방문하면, 자바스크립트가 로딩되고 실행될 때까지 사용자는 비어 있는 페이지를 보며 대기해야 합니다. 여기에 API까지 호출해야 한다면 사용자의 대기 시간이 더더욱 길어집니다. 반면 서버 사이드 렌더링을 구현한 웹 페이지라면 자바스크립트 파일 다운로드가 완료되지 않은 시점에서도 html상에 사용자가 볼 수 있는 콘텐츠가 있기 때문에 대기 시간이 최소화되고, 이로 인해 사용자 경험도 향상됩니다.

 

 

📌 서버 사이드 렌더링의 단점 

단점은 무엇이 있을까요? 서버 사이드 렌더링은 결국 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 것이므로 서버 리소스가 사용된다는 단점이 있습니다. 갑자기 수많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부하가 발생할 수 있습니다. 따라서 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화해줘야 합니다. 또한, 서버 사이드 렌더링을 하면 프로젝트의 구조가 좀 더 복잡해질 수 있고, 데이터 미리 불러오기, 코드 스플리팅과의 호환 등 고려해야 할 사항이 더 많아져서 개발이 어려워질 수도 있습니다. 또한 TTV(Time To View)와 TTI(Time To Interact)라는 것에 대한 단점도 있습니다. 

 

아래의 그림은 TTV와 TTI에 대해 쉽게 이해할 수 있는 사진입니다.

 

SSR 방식에서는 서버에서 만들어진 HTML 파일을 가져오게 되고 사용자는 바로 웹사이트를 볼 수 있습니다. 하지만 웹 사이트를 동적으로 제어할 수 있는 자바스크립트 파일은 아직 받아오지 않았기 때문에 사용자가 클릭을 해도 아무런 것도 처리할 수 없는 상태가 됩니다. 최종적으로 자바스크립트 파일을 받아와야지만 사용자가 원하는 것을 처리할 수 있는 인터랙션이 가능해집니다.

 

그래서 SSR은 사용자가 사이트를 볼 수 있는 시간(TTV)와 실제로 인터랙션이 가능한 시간(TTI)의 공백시간이 꽤 길다는 단점이 존재합니다.

 

 

반대로 Client Side Rendering은 HTML만 받아왔을 때는 아무것도 보이지 않고 링크되어 있는 모든 로직을 처리하는 자바스크립트 하일을 받아오게 되면 웹 사이트가 보이는 동시에 인터랙션이 가능해집니다. 즉, TTV와 TTI의 공백시간이 없는 것입니다. 

 

🏷️ 출처

 

https://ctdlog.tistory.com/46

https://www.youtube.com/watch?v=iZ9csAfU5Os&t=592s