client-side vs. server-side

클라이언트 사이드 렌더링

• UI 렌더링을 브라우저에서 모두 처리 (즉, 자바스크립트를 실행해야 화면이 사용자에게 보임!)
• 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못함
• 자바스크립트가 실행될 때까지 페이지가 비어있기 때문에, 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수도 있다는 단점도 있음

서버 사이드 렌더링

• UI를 서버에서 렌더링하는 것을 의미
• 서버 사이드 렌더링을 구현하면, 사용자가 웹 서비스에 방문했을 때, 서버쪽에서 "초기 렌더링"을 대신해줌. 그리고 사용자가 html을 전달받을 때 그 내부에 렌더링된 결과물이 보임

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

• 검색엔진이 웹페이지를 원할하게 수집할 수 있음 (검색 엔진 크롤러 봇은 자바스크립트가 실행되지 않는 환경이라 자바스크립가 실행되어야 보이는 클라이언트 사이드 렌더링을 확인할 수 없음)
• 웹 서비스의 검색 엔진 최적화를 위해서라면 서버 사이드 렌더링을 구현해주는 것이 좋음

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

• 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 것이므로, 서버 리소스가 사용됨 (사용자가 많은 경우, 캐싱/로드밸런싱을 통해 성능 최적화 필요)
• 프로젝트 구조가 좀 더 복잡해질 수 있고, 데이터 미리 불러오기/코드스플리팅과의 호환 등 고려해야할 사항이 많음

서버 사이드 렌더링과 코드 스플리팅 충돌

• 페이지 깜빡임 발생
• 해결을 위해서는, 라우트 경로마다 코드 스플리팅된 파일 중에서 필요한 모든 파일을 브라우저에 렌더링하기 전에 미리 불러와야함

Reference

• https://velopert.com/3425
• 책/리액트를 다루는 기술(개정판)