CSR과 SSR이란? 둘 의 장단점 비교

 

 

CSR과 SSR은 웹 개발에서 사용되는 두 가지 다른 방법으로 웹 페이지를 렌더링하는 방식을 말한다.

이 두 방식은 각각 클라이언트 측 렌더링(Client-Side Rendering, CSR)과 서버 측 렌더링(Server-Side Rendering, SSR)로 알려져있다. 각각의 방식은 그 동작 방식과 장단점이 다르며 특정한 사용 사례와 요구 사항에 따라 선택된다.

 

 

 

1. 클라이언트 측 렌더링(CSR)
   1. CSR은 주로 싱글 페이지 애플리케이션(SPA)에서 사용되는 접근 방식이다.
   2. CSR은 웹 애플리케이션을 브라우저에서 렌더링하는 방식이다. 주로 JavaScript와 프론트엔드 프레임워크 또는 라이브러리(예: React, Vue, Angular)를 사용하여 구현된다.
   3. 클라이언트 측에서 모든 렌더링을 처리한다. 즉 HTML, CSS 및 기본 JavaScript 파일을 서버에서 받아온 후, 페이지의 내용은 클라이언트에서 동적으로 렌더링된다.
   4. 이 방식은 사용자 경험을 향상시키는 데 유용하며, 웹 애플리케이션의 빠른 응답 및 상호작용이 가능하도록 한다.
   5. 초기 페이지 로딩 속도는 빠를 수 있지만, 초기 요청 이후 필요한 데이커를 서버로부터 비동기적으로 가져와야 하므로 추가적인 네트워크 요청이 필요하다.
   6. 단점으로는 초기 로딩 시에 빈 페이지가 표시될 수 있으며, SEO(검색 엔진 최적화)에 대한 처리가 별도로 필요하다.
2. 서버 측 렌더링(SSR)
   1. SSR은 웹 서버에서 페이지의 HTML을 생성하고 클라이언트에 보내는 방식이다. 주로 백엔드 프레임워크(예: Express.js, Ruby onRails)와 프론트엔드 라이브러리를 함께 사용하여 구현된다.
   2. 초기 로딩 시 완전한 페이지 콘텐츠가 서버에서 생성되므로, 검색 엔진에 더 우수한 SEO 지원을 제공한다.
   3. CSR에 비해 초기 로딩 시 빠른 내용 표시를 제공하지만, 페이지의 상호작용 및 동적 업데이트는 클라이언트 측 JavaScript에 의해 처리된다.
   4. SSR은 사용자의 요청마다 서버에서 페이지를 새로 렌더링하므로 서버 부하가 높을 수 있다.
   5. 단점으로는 사용자 경험을 향상시키기 위해 추가적인 네트워크 요청이 필요할 수 있으며, 클라이언트 측에서의 상호작용이 제한될 수 있다.

 

 

두 방식은 프로젝트의 목표와 요구 사항에 따라 선택되며, 종종 두 가지 방식을 혼합하여 사용하기도 한다.

일반적으로, 초기 로딩 속도와 SEO가 중요한 경우 SSR을 고려하고, SPA의 더 풍부한 상호작용이 필요하 경우 CSR을 선택할 수 있다.

또한, 두 접근 방식을 혼용하여 초기 렌더링을 서버 측에서 수행하고 이후 클라이언트 측에서 상호 작용을 처리하는 하이브리드 접근 방식도 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

예시로 보자!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. CSR(클라이언트 사이드 렌더링)

 

예시: React 앱을 사용하는 블로그 웹 애플리케이션

• 사용자가 초기 페이지를 요청하면 서버는 비어 있는 HTML 페이지를 제공한다.
• 이 HTMl 페이지는 CSS 및 JavaScript 파일을 포함하고 있다.
• 브라우저가 페이지를 로드한 후, JavaScript가 실행되고, 데이터를 가져와서 블로그 게시물의 목록을 동적으로 생성하고 렌더링한다.
• 사용자가 다른 블로그 게시물로 이동하거나 필터를 적용할 때, 새로운 데이터를 서버에서 가져와 브라우저에서 동적으로 업데이트 된다.

장점:

• 초기 페이지 로딩이 빠르다.
• 사용자 경험을 향상시킬 수 있다.
• 웹 애플리케이션은 싱글 페이지 애플리케이션(SPA)처럼 동작한다.

단점:

• SEO에 취약하다.
• 초기 페이지 로딩 시 비어 있는 화면이 표시된다.

 

 

2. SSR(서버 사이드 렌더링)

 

예시: Next.js를 사용한 블로그 웹 애플리케이션

• 사용자가 초기 페이지를 요청하면 서버에서 해당 페이지를 동적으로 생성하고 렌더링한 HTML을 제공한다.
• HTML 페이지에는 초기 데이터가 포함되어 있어 검색 엔진은 콘텐츠를 쉽게 색인화할 수 있다.
• 사용자가 페이지를 요청할 때마다 서버는 해당 페이지를 다시 렌더링하고 새로운 HTML을 제공한다.

장점:

• SEO에 강력하다.
• 초기 페이지 로딩이 빠르다.
• 소셜 미디어 미리보기 및 공유에 용이다.

단점:

• 페이지 간 전환 시 추가적인 서버 요청이 필요할 수 있어 사용자 경험이 느릴 수 있다.
• 서버 부하가 증가할 수 있다.

 

 

 

 

 

 

 

---

참고: GPT