*SSR의 경우 서버에서 이미 렌더링된 HTML 파일을 클라이언트로 가져오기만 하면 되어 초기 로딩 시 빠른 화면 출력이 가능하다는 이점이 있다.*
하지만 모든 data fetch가 끝나야 어떤 것이라도 보여줄 수 있다. 그리고 모든 JavaScript 코드를 로딩하기 전에는 Hydration 단계로 넘어갈 수 없다.
즉, 앱이 상호 작용할 수 있는 상태가 되려면 요청된 페이지의 모든 JavaScript를 다운받아 로드된 이후에 Hydration이 완료되어야 한다.
앱 전체의 페이지마다 요청 시 동일한 과정을 반복해야 한다.
*CSR의 경우 서버에서 빈 HTML파일을 클라이언트로 가져오고, 번들링된 모든 JS파일들을 다운로드 받은 뒤 브라우저에서 렌더링이 완료 되어야 초기 화면이 출력이 된다. 그렇기에 SSR보다 초기 로딩 시간이 느리다는 단점이 존재한다.*
하지만 코드 분할(code spliting)로 초기 로딩 시간을 단축 시킬수 있다.
SSR의 경우 앱의 전체 JS 파일을 다운로드 받아와야 하지만 CSR의 경우 코드 분할을 통해 당장 렌더링에 필요한 JS 파일들만 다운로드 받아오고, 현재 필요없는 컴포넌트의 JS 파일들은 동적으로 다운로드 받아올 수 있기 때문에 효과적으로 로딩 시간을 단축 시킬수 있다.
SSR
CSR + 코드분할 (Suspense + lazy)