[WEB] SSR과 CSR 차이점

🎯 SSR과 CSR 차이점

• Server Side Rendering, Client Side Rendering에 대해 알아보자!

 

📝 Server Side Rendering

📕 Server Rendering

• React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다.
• 클라이언트는 별도의 처리 없이 웹페이지 노출
• 이를 Server Rendering이라고 한다.
• 즉, 서버에서 페이지를 렌더링 해준다.

 

📕 Server Side Rendering

• Server Rendering을 MPA(Multi Page application)라고 부른다.
• 서버에서 자바스크립트를 이용해 페이지를 미리 빌드한다.
• 컴포넌트 생성에 필요한 API 요청, routing, redux store 생성 등을 처리한다.
• 클라이언트는 빌드된 페이지와 자바스크립트를 받아 웹앱을 CSR처럼 동작하게 한다. ⇒ hydration
• 이런 특징으로 Universal Rendering이라고도 한다.

 

📕 SSR의 장점

• Crawler는 페이지를 Indexing 하기 위해 페이지에 관한 많은 정보가 필요하다.
• SSR을 활용하여 미리 페이지를 빌드하면 Crawler에게 많은 정보를 줄 수 있다. ⇒ SEO(Search Engine Optimization)에 유리

 

📕 SSR의 단점

• CSR에 비해 TTFB에 불리
• 별도의 서버를 유지하는 비용
• Static rendering보다 CDN Caching에 불리

 

📕 SSR의 페이지 로드 방식

• 유저가 빠르게 페이지의 내용을 볼 수 있도록 HTML을 미리 빌드하여 FCP 등의 키 메트릭을 개선할 수 있다.
• 서버 자원을 활용하여, 초기 큰 성능이 필요한 페이지 등을 빌드하는 데 활용한다.

 

📝 Client Side Rendering

• Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 되었다.
• 데이터는 XML, JSON 형태로 클라이언트에 전송한다.
• 이를 CSR(Client Side Rendering)이라고 한다.

 

📕 CSR의 장점

• CSR은 자바스크립트만으로 완전히 페이지를 만들 수 있다.
• 자바스크립트를 최대한도로 활용하여 HTML, CSS를 동적으로 생성할 수 있다.
• 컴포넌트 단위로 코드를 나누고, 다양한 디자인 패턴을 적용하는 등, 클라이언트 개발의 수준을 한 단계 끌어올릴 수 있다.
• Full page load 없이 라우팅(로딩이 없다 ⇒ 사용자 경험 상승)

 

📕 CSR의 단점

• 자바스크립트 코드가 많으면 앱 로딩이 느려진다.
• SEO가 좋지 않음!!!!!!
  • crawler가 서버에서 페이지 요청해서 html만을 읽어서 페이지에 어떤 정보가 있는지 확인하고 db에 저장하고 유저가 검색하면 db에서 정보를 꺼내 준다.
  • CSR경우 브라우저에서 페이지를 만들기 때문에 초기에 정보가 많이 없다. 그래서 SEO가 좋지 않다.

 

📕 CSR의 페이지 로드 방식