5. SSR의 단점
서버 사이드 렌더링(SSR)은 대표적으로 다음과 같은 단점이 있음
1. Server에서는 렌더링 작업을 수행하는데 필요한 데이터들이 모두 다운로드될 때까지 렌더링을 시작할 수 없음
즉, Server Side Rendering이기 때문에 기본적으로 렌더링을 서버에서 수행하며 렌더링된 HTML을 클라이언트로 응답해야 하는데,
데이터베이스에서 렌더링에 필요한 데이터를 받아오는 작업이나 외부 API와 같은 데이터를 가져오는 작업 등 네트워크 IO로 인해 처리 시간이 소요될수록 렌더링을 하는 시간도 오래 걸리게 되고,
결과적으로 클라이언트에게 렌더링된 HTML 파일을 응답하는 시간도 증가하게 됨
2. Client에서 React가 Hydration을 수행하기 위해서는 먼저 브라우저에 완전한(Fully) JS 파일이 모두 다운로드 되어있어야 함
즉, 서버로부터 Static HTML을 먼저 응답 받고, 이후 JS를 서버에 요청하여 받아온 후, 해당 JS 파일을 가지고 Hydration을 수행해야 하기 때문에,
React가 Hydration을 온전하게 수행하려면 전체 용량의 JS 파일이 완전히 다운로드가 완료되어야 비로소 Hydration을 수행할 수 있다는 것
Hydration, 수분 공급
브라우저가 서버에서 렌더링된 HTML 문서(마크업)를 전달받으면, 각 마크업에 자바스크립트의 이벤트와 상태 변수 등을 연결하는 과정
Hydration 과정이 모두 완료되어야 사용자는 비로소 페이지와 상호작용(Interaction)이 가능해지며,
반대로 Hydration이 완료되지 않았을 경우, 상호작용을 할 수 없고 해당 마크업은 UI만 렌더링된 형태라고 볼 수 있음
3. 사용자가 서비스(웹 페이지)와 상호작용(Interaction)을 하기 위해서는 모든 Hydration이 먼저 완료되어야 함
여기서 포인트는 일부 Hydration이 아닌, 모든 Hydration이 완료되어야 한다는 것으로, 예를 들어 사용자는 현재 자신이 보고 있는 페이지 중 구매 버튼에 대한 인터랙션만 하면 되는데,
다른 상품 구경하기, 더 보기 등 현재 사용자의 맥락에서 중요도가 다소 떨어지는 버튼들에 대한 인터랙션도 동작할 수 있도록 Hydration 처리가 모두 완료되어야 비로소 구매 버튼을 누를 수 있게 된다는 의미