SSR? CSR? 🤔
SSR
과 CSR
은 모두 웹 애플리케이션에서 클라이언트 측에서 렌더링되는 방식을 의미합니다.
SSR(Server-side rendering)
SSR 는 전통적인 PHP, JSP, ASP 혹은 최근에는 Next.js 등을 사용하여 서버 단에서 HTML/CSS 를 생성하여 사용자에게 그 결과물만을 전달하는 방식이다.
SSR(Server-side rendering)
은 서버 측에서 HTML, CSS 및 JavaScript 코드를 생성하여 클라이언트에게 전송하는 방식입니다.
- 클라이언트는 서버에서 받은 HTML 코드를 기반으로 초기 페이지를 로드하고, 필요한 경우 JavaScript 코드를 다시 로드하여 페이지를 업데이트합니다.
- SSR의 장점은 초기 페이지 로드 시간을 줄이고, 검색 엔진 최적화(SEO)를 쉽게 할 수 있다는 것입니다.
- 빠른 첫 페이지 로드를 통해 사용자 경험을 향상시킬 수 있습니다.
- 단점은 서버의 부담이 높아질 수 있다는 것입니다.
CSR(Client-side rendering)
CSR은 서버에서 요청을 받으면 클라이언트에 HTML과 JavaScript를 보내줍니다. 클라이언트는 그것을 받아 렌더링을 시작합니다.
CSR(Client-side rendering)
은 클라이언트 측에서 JavaScript를 사용하여 HTML, CSS 및 JavaScript 코드를 생성하는 방식입니다.
- 클라이언트는 서버에서 초기 HTML을 받은 후, JavaScript를 사용하여 페이지를 렌더링합니다.
- CSR의 장점은 서버의 부담이 줄어들며, 사용자 경험을 더욱 향상시킬 수 있다는 것입니다.
- JavaScript 프레임워크 및 라이브러리를 사용하여 효율적으로 페이지를 구성할 수 있다는 것입니다.
- 초기 페이지 로드 시간이 느릴 수 있고, SEO에 대한 고려가 필요하다는 것입니다.
- 대다수의
SPA (Single Page Application)
은 CSR 방식으로 개발됩니다.
따라서...😯
SSR과 CSR의 선택은 개발하고자 하는 웹 애플리케이션의 목적과 특성에 따라 달라집니다.
- 초기 로드 시간과 SEO 최적화가 중요한 경우 SSR을 선택!
- 동적인 UI와 빠른 반응성이 중요한 경우 CSR을 선택!