[React] CSR(Client-side Rendering)과 SSR(Server-side Rendering)의 차이

CSR(Client-side Rendering)과 SSR(Server-side Rendering)의 차이점

웹 애플리케이션의 렌더링 방식에 차이가 있음

 

---

클라이언트 사이드 렌더링 (CSR)

• 클라이언트에서 JavaScript를 사용하여 웹 애플리케이션의 UI를 렌더링
• 초기 요청에는 서버에서 정적 파일(HTML, CSS, JavaScript)을 제공하고, 이후에 클라이언트에서 API 요청을 통해 데이터를 가져와 동적으로 UI를 업데이트
• 서버는 단순히 정적 파일을 제공하므로, 서버 부하가 적고 클라이언트 측에서 더 많은 작업을 수행
• 초기 로딩 속도가 느릴 수 있으며, 검색 엔진 크롤러가 웹 페이지의 내용을 파악하기 어려울 수 있음

---

서버 사이드 렌더링 (SSR)

• 서버에서 JavaScript를 사용하여 웹 애플리케이션의 UI를 렌더링
• 초기 요청에 서버에서 데이터를 가져와 UI를 완전히 렌더링한 HTML을 생성하여 클라이언트에게 전달
• 클라이언트는 완전한 HTML을 받아 즉시 표시할 수 있으므로 초기 로딩 속도가 빠름
• 서버 측에서는 데이터 가져오기, 라우팅, 렌더링 등의 작업을 처리하므로 클라이언트 측에 비해 더 많은 부하를 유발할 수 있음
• 검색 엔진 크롤러가 완전한 HTML을 읽을 수 있으므로 SEO에 유리함

---

간단 정리

CSR은 동적인 웹 애플리케이션에 적합하며, 초기 로딩 속도보다 사용자 인터랙션과 반응성이 중요한 경우에 적합함

SSR은 초기 로딩 속도와 SEO에 중점을 두는 경우에 유리함

 

또한, Next.js와 같은 프레임워크를 사용하면 CSR과 SSR을 조합하여 하이브리드 렌더링을 구현할 수 있어, 애플리케이션의 특정 부분에 대해서만 SSR을 사용하거나 필요에 따라 동적으로 전환할 수도 있음