CSR과 SSR

---

CSR (Client-Side Rendering)과 SSR (Server-Side Rendering)은 웹 애플리케이션의 렌더링 방식에 따라 구분되는 두 가지 주요 아키텍처이다.

CSR(Client-Side Rendering)

CSR은 클라이언트 측에서 자바스크립트를 사용하여 웹 페이지를 렌더링하는 방식
브라우저가 초기 HTML 파일을 받아오고, 이후 필요한 데이터를 API 호출을 통해 가져와 클라이언트 측에서 렌더링한다.

CSR 동작 과정

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다.
3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다.
4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다.

CSR 특징

1. 초기 로드 시간 : 초기 로드 시에는 최소한의 HTML과 자바스크립트 파일만 받아오고, 이후 페이지의 콘텐츠는 자바스크립트에 의해 동적으로 로드된다.
2. 빠른 페이지 전환 : 이후 페이지 간의 전환은 클라이언트 측에서 자바스크립트를 사용해 빠르게 이루어진다.
3. 상태 관리 : 클라이언트 측에서 상태를 관리한다.

CSR 장단점

장점

1. 빠른 페이지 전환: 페이지 전환 시 전체 페이지를 다시 로드하지 않기 때문에 반응 속도가 빠르다.
2. 좋은 사용자 경험: 클라이언트 측에서 동적으로 페이지를 업데이트할 수 있어 풍부한 인터랙션이 가능하다.
3. 네트워크 효율성: 초기 로드 후 필요한 데이터만 API를 통해 가져오기 때문에 네트워크 효율이 좋다.

단점

1. 초기 로드 시간: 자바스크립트 파일을 로드하고 실행하는 데 시간이 걸리기 때문에 초기 로드 시간이 길어질 수 있다.
2. SEO 문제: 검색 엔진 봇이 자바스크립트를 실행하지 않으면 페이지 콘텐츠를 인덱싱하기 어려워 SEO에 불리할 수 있다.
3. 자바스크립트 의존성: 자바스크립트를 사용할 수 없는 환경에서는 페이지가 제대로 작동하지 않을 수 있다.

SSR(Server-Side Rendering)

SSR은 서버 측에서 HTML을 렌더링하여 클라이언트에 전달하는 방식
클라이언트가 요청을 보내면 서버가 해당 요청에 대한 HTML을 생성하여 반환한다.

SSR 동작 과정

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JavaScript코드를 브라우저에 응답으로 전달한다.
3. 브라우저에서는 JavaScript코드를 다운로드하고 HTML에 JavaScript로직을 연결한다.

SSR 특징

1. 초기 로드 시간: 서버가 완전한 HTML을 반환하기 때문에 초기 로드 시간이 빠를 수 있다.
2. SEO 최적화: 검색 엔진이 완전한 HTML을 크롤링할 수 있기 때문에 SEO에 유리하다.
3. 서버 부하: 서버가 각 요청에 대해 HTML을 생성해야 하므로 서버 부하가 증가할 수 있다.

SSR 장단점

장점

1. 빠른 초기 로드 시간: 서버에서 완전한 HTML을 제공하기 때문에 초기 로드 시간이 빠를 수 있다.
2. SEO 최적화: 검색 엔진이 완전한 HTML을 크롤링할 수 있어 SEO에 유리하다.
3. 초기 렌더링: 사용자에게 초기 렌더링된 페이지를 빠르게 제공할 수 있다.

단점

서버 부하 증가: 각 요청마다 서버에서 HTML을 생성해야 하므로 서버 부하가 증가할 수 있다.
페이지 전환 속도: 페이지 전환 시마다 서버에 요청을 보내야 하므로 페이지 전환 속도가 느릴 수 있다.
복잡한 설정: 서버 측에서 렌더링을 구현하고 관리하는 데 복잡성이 증가할 수 있다.

CSR vs SSR 차이

1. 웹 페이지를 로딩하는 시간

첫 페이지 로딩시간

• CSR의 경우 HTML, CSS와 모든 스크립트들을 한번에 불러온다.
• SSR의 경우 필요한 부분의 HTML과 스크립트만 불러온다.

=> 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간

• CSR의 경우 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
• SSR의 경우 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 때문에 더 느리다.

=> CSR이 더 빠르다.

SEO 대응

• CSR의 경우 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀐다.
• SSR의 경우 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

서버 자원 사용

• CSR의 경우 클라이언트에 일을 몰아주기 때문에 서버에 부하가 적다.
• SSR의 경우 매번 서버에 요청을 해야하기 때문에 서버 자원을 더 많이 사용하고 때문에 서버에 부하가 생긴다.