프론트 공부하다가 SSR, CSR 이 용어가 계속 나오는데 정확한 차이를 모르겠어서 질문 올립니다. 리액트로 만든 사이트는 CSR이라고 하고, Next.js 쓰면 SSR도 된다는데 뭐가 어떻게 다른 건지 감이 안 와요.
제가 리액트로 만든 페이지를 브라우저에서 소스보기(view source) 해봤더니 body 안이 거의 텅 비어있고 이런 것만 있더라고요.
<div id="root"></div>
<script src="/bundle.js"></script>
실제 화면에는 글도 이미지도 다 잘 나오는데 소스보기엔 왜 내용이 하나도 없는 거죠? 이게 CSR이라서 그런 건가요? 자바스크립트가 나중에 화면을 그려주는 방식이라 처음 받은 HTML엔 아무것도 없는 거라고 이해하면 되나요?
그리고 이게 SEO랑도 관련 있다고 들었어요. 검색엔진이 페이지를 읽을 때 위처럼 텅 빈 HTML만 보면 내용이 없다고 판단해서 검색에 안 잡힌다는 건가요? 그래서 블로그나 쇼핑몰처럼 검색 노출이 중요한 사이트는 SSR을 써야 한다는 얘기를 들었는데 맞는 방향인지 궁금해요.
SSR이랑 CSR이 각각 어떤 상황에 맞는 건지, 그리고 SEO 때문에 무조건 SSR로 가야 하는 건지 정리해주시면 감사하겠습니다.