[Next] CSR, SSR, SSG 의 차이

CSR (Client Side Redering)

• 클라이언트 측에서 렌더링 하는 방식
• 초기 HTML 파일에는 간단한 뼈대만 제공 후 자바스크립트를 통해 클라이언트에서 동적으로 로딩
• SPA에서 사용

CSR 장점

• 페이지를 동적으로 업데이트할 수 있다
• 클라이언트에서 처리하므로 서버에 부담이 적다
• 초기 렌더링 후 페이지 전환이 빠름 (JS를 통한 동적으로 돔을 그려냄)
• 기본 레이아웃 구조에서 필요한 컨텐츠만 로드할 수 있다 (ex: Header, Footer)

CSR 단점

• SEO에 취약함 (정적 파일 HTML 안에서 안에 컨텐츠들만 동적으로 JS로 그려주다 보니 각 페이지에 대한 정보를 담기 힘들다)
• 첫 로드시 브라우저가 모든 JS 파일과 데이터를 로드를 해야하기 때문에 초기 로딩속도가 느리다

SSR (Sever Side Rendering)

• 서버 측에서 HTML 페이지를 완전히 생성한 후 이를 클라이언트 측에 전달
• 전통적인 렌더링 방식

SSR 장점

• SEO에 유리함
• 빠른 초기 로딩 속도

SSR 단점

• 요청이 들어올 때마다 서버에서 페이지를 렌더링해야 하기 때문에 서버에 부하가 걸림
• 복잡한 상태를 관리하기 어려움
• 페이지 이동 시 새로운 HTML 파일을 받아오기 때문에 화면이 깜빡인다

SSG (Static Site Generation)

• 빌드 시점에 HTML로 변환 (HTML, JSON 파일 동시 생성, 새로고침 시 html을 내려주고 페이지 이동 시 JSON을 내려줌)
• CSR의 단점을 보완
• 사용자가 요청할 때 즉시 제공

SSG 장점

• 빠른 로딩 속도 (HTML이 미리 생성되어 있어 요청 시 즉시 제공)
• 서버 부담이 적다
• SEO에 유리
• 보완이 뛰어나다 (불필요한 소스코드들을 클라이언트 측에 보낼 필요가 없기 때문)

SSG 단점

• 페이지가 많을 경우 빌드 시간이 오래 걸릴 수 있다
• 데이터가 정적 (빌드할 때 렌더링하기 떄문에 데이터가 정적)