CSR과 SSR은 화면을 만들기 위한 렌더링을 어디에서 수행하는지에 따른 구분입니다. 둘 중 하나가 항상 빠르다기보다는, 콘텐츠가 보이고 조작 가능해지는 과정에 차이가 있습니다.
CSR: 브라우저에서 화면 만들기
CSR(Client-side Rendering)은 브라우저가 JavaScript를 실행해 화면을 만드는 방식입니다. 클라이언트 렌더링 중심의 React 앱은 최소한의 HTML과 필요한 JavaScript를 받은 뒤 DOM을 갱신합니다.
처음 진입할 때는 코드와 데이터를 내려받고 실행하는 시간이 필요합니다. 이후에는 필요한 부분만 갱신할 수 있지만, 실제 속도는 JavaScript 크기와 네트워크, 기기 성능에 따라 달라집니다.
초기 HTML에 콘텐츠가 없으면 JavaScript를 실행하지 않는 크롤러는 빈 화면이나 로딩 상태만 읽을 수 있습니다. Next.js의 CSR 설명
SSR: 서버에서 HTML 만들기
SSR(Server-side Rendering)은 요청을 처리할 때 서버에서 HTML을 생성해 응답하는 방식입니다. Next.js Pages Router에서는 getServerSideProps를 사용하는 페이지가 여기에 해당합니다. Next.js의 SSR 설명
브라우저는 전달받은 HTML로 콘텐츠를 먼저 표시할 수 있습니다. 다만 서버에서 데이터를 조회하고 렌더링하는 시간이 길면 응답도 늦어집니다.
React의 hydration을 사용하는 경우에는 HTML이 보인 뒤에도 이벤트 처리를 연결하는 JavaScript 실행이 필요합니다. 화면이 보이는 시점과 버튼을 누를 수 있는 시점을 같다고 보면 안 됩니다. web.dev의 hydration 설명
비교할 때 확인할 것
CSR은 브라우저의 코드 실행 비용을, SSR은 서버의 응답 생성 비용과 이후 hydration 비용을 함께 봐야 합니다. 캐시와 데이터 조회 방식에 따라 결과가 달라지므로 “CSR은 서버 부하가 적고 SSR은 초기 로딩이 빠르다”고 단정하기는 어렵습니다.
페이지 전환 방식과도 구분해야 합니다. 서버에서 만든 첫 화면을 보여준 뒤 클라이언트에서 이동할 수 있고, 한 앱 안에서 렌더링 방식을 섞어 쓸 수도 있습니다. Next.js의 혼합 렌더링 설명