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을 선택!