[개발 지식] CSR vs SSR

CSR(Client-Side Rendering)와 SSR(Server-Side Rendering)의 차이점

웹 개발에서 CSR과 SSR은 웹 페이지를 렌더링하는 두 가지 주요 방법입니다.
이 둘의 차이점은 페이지가 렌더링되는 위치와 시점에 있습니다.
각각의 특징과 차이점을 알아보고, 예시를 통해 이해해보겠습니다.

1. CSR (Client-Side Rendering)

CSR은 클라이언트 측, 즉 브라우저에서 웹 페이지를 렌더링하는 방식입니다.
이 방법은 주로 현대적인 프론트엔드 프레임워크(예: React, Vue.js)에서 사용됩니다.

• 작동 방식: 서버는 단순히 HTML과 JavaScript 파일을 클라이언트(브라우저)에게 전송합니다.
                   이후 브라우저가 JavaScript를 실행하여 페이지를 렌더링하고 사용자에게 보여줍니다.
• 장점: 서버의 부담이 적고, 사용자가 상호작용할 때 빠른 응답성을 제공할 수 있습니다.
• 단점: 초기 로딩 시간이 길어질 수 있으며, 검색 엔진 최적화(SEO)에 불리할 수 있습니다.

예시: 온라인 쇼핑몰에서 사용자가 상품 목록 페이지를 방문할 때, HTML 파일이 처음에는 빈 껍데기만 전달되고,
          이후 브라우저가 JavaScript를 실행해 상품 데이터를 가져와 화면에 보여줍니다.

2. SSR (Server-Side Rendering)

SSR은 서버에서 웹 페이지를 렌더링하고, 완성된 HTML을 클라이언트로 전송하는 방식입니다.
전통적인 웹 사이트나 Next.js 같은 프레임워크에서 주로 사용됩니다.

• 작동 방식: 서버가 요청을 받으면, 즉시 HTML을 생성하고 클라이언트에 전달합니다.
                   클라이언트는 이 HTML을 받아 바로 페이지를 표시합니다.
• 장점: 초기 로딩 속도가 빠르며, SEO에 유리합니다.
           페이지가 미리 렌더링되어 제공되기 때문에 검색 엔진이 내용을 쉽게 크롤링할 수 있습니다.
• 단점: 서버에 부하가 가중될 수 있으며, 사용자 상호작용 시 추가적인 로딩이 발생할 수 있습니다.

예시: 뉴스 사이트에서 특정 기사를 읽으려고 할 때,
        서버는 해당 기사의 HTML 페이지를 즉시 생성하여 브라우저로 전송합니다.
         브라우저는 이 HTML을 받아 바로 화면에 기사를 보여줍니다.

3. CSR과 SSR의 선택 기준

CSR과 SSR 중 어떤 방식을 사용할지는 프로젝트의 요구사항에 따라 달라집니다.

• CSR이 적합한 경우: 사용자의 상호작용이 많고, 실시간으로 변하는 데이터가 많은 애플리케이션
                                    (ex: 채팅 앱, 대시보드)에서 효과적입니다.
• SSR이 적합한 경우: SEO가 중요하거나 초기 로딩 속도가 중요한 경우(ex: 블로그, 뉴스 사이트)에 적합합니다.