CSR 과 SSR 그리고 SPA

원티드 인턴쉽에서 멘토님의 강의를 듣던 중 CSR 과 SSR 이란 주제가 나왔었다.

SSR은 알고 있는데 CSR 과 SPA는 뭐지? 처음 듣네,,, 생각하고 바로 찾아보았다. ㅋㅋ

 

모두 웹 애플리케이션의 개발 방식인데 개발 방식의 차이를 정리해 보았다.

CSR

Client Side Rendering

1. 랜더링 위치: CSR은 클라이언트 측에서 랜더링이 이루어진다. 즉, 브라우저에서 페이지의 내용을 생성하고 업데이트한다.
2. 방식: 웹 애플리케이션의 초기 로딩은 서버에서 HTML파일을 받아오지만, 이후 내용 및 뷰의 업데이트는 클라이언트 측 JavaScropt를 사용하여 비동기적으로 처리된다. 이는 주로 JavaScript 프레임워크(ex: React, Angular, Vue.js)를 활용한다.
3. 검색 엔진 최적화(SEO): CSR 기반 앱은 검색 엔진 최적화를 위한 추가 작업이 필요할 수 있다. 검색 엔진은 페이지의 초기 HTML 로드만 처리하며, 페이지 업데이트는 JavaScript를 통해 이루어지므로 초기 크롤링 후에는 동적 데이터에 대한 크롤링이 어려울 수 있다.
4. 페이지 로딩 속도: 초기 로딩이 빠르며, 클라이언트 측에서 필요한 데이터를 비동기적으로 가져와 랜더링하므로 빠른 반응형 인터페이스를 제공한다.
5. 유저: 페이지 초기 로딩 이후 향상된다. 페이지 내용이 변경될 때 브라우저에서 페이지를 다시 그리기 때문에 부드럽게 느껴진다.

SSR

Server Side Rendering

1. 랜더링 위치: SSR은 서버 측에서 랜더링이 이루어진다. 즉, HTML 페이지를 생성하고 브라우저에 전달한다.
2. 방식: 웹 애플리케이션의 초기 로딩 및 페이지 내용 랜더링이 서버에서 수행된다. 서버는 페이지의 내용을 미리 생성하고 데이터를 삽입한 후, 클라이언트에 제공한다.
3. 검색 엔진 최적화(SEO): SSR 기반 앱은 검색 엔진 최적화가 간단하다. 검색 엔진은 페이지의 초기 HTML을 수신하므로 페이지 내용을 이해하고 색인화하기 쉽다.
4. 페이지 로딩 속도: 초기 로딩 속도는 CSR보다 상대적으로 느리다. 그러나 클라이언트 측에서 추가 데이터 요청이 필요하지 않아 전체 페이지 로딩이 빠르다.
5. 유저: 초기 페이지 로딩이 느릴 수 있지만 전체 페이지가 서버에서 준비되므로 그 이후에는 좋아진다. 페이지가 완전한 상태로 로드되기 때문에 페이지 전환이 매끄럽게 이루어진다.

SPA

Single Page Application

1. 랜더링 위치: SPA는 클라이언트 측에서 모든 랜더링이 이루어진다. 웹 애플리케이션의 초기 로딩 시에 하나의 HTML 페이지를 불러오며, 이후 페이지 내용 및 상태 업데이트는 JavaScript를 통해 동적으로 처리된다.
2. 방식: SPA는 페이지 간 전환 시에 서버로부터 새로운 HTML을 가져오지 않는다. 대신, 클라이언트 측에서 필요한 데이터를 비동기적으로 가져와 페이지 내용을 업데이트한다.
3. 검색 엔진 최적화 (SEO): 초기 SPA 구현에서는 검색 엔진 최적화가 어려웠지만, 현재는 몇 가지 기술적 방법으로 SPA를 SEO 친화적으로 만드는 방법이 개발되었다.
4. 페이지 로딩 속도: 초기 로딩 속도는 빠르다. 이후 페이지 전환 시에 필요한 데이터만 가져와 랜더링때문.

 

 

 

각각의 장단점이 존재해서 뭐가 좋다고 하기엔 어렵지만,  

요새의 트렌드는 SPA라고 한다.