CSR vs SSR

 

Client Side Rendering에 익숙해져있던 나에게 생소한 개념으로 다가왔던 SSR에 대해 정리할겸 각각의 차이점을 정리해보기로 했다.

 

CSR(Client Side Rendering)과 SSR(Server Side Rendering)는 웹 애플리케이션에서 페이지를 렌더링하는 두 가지 주요 방식이다.

 

CSR (Client Side Rendering)

1. 개념

• 클라이언트 측에서 렌더링이 이루어지는 방식
• 초기에는 서버에서 빈 페이지를 받아오고, 클라이언트에서 JavaScript를 사용하여 동적으로 컨텐츠를 렌더링

2. 프레임워크

• React: 브라우저에서 JavaScript가 실행되어 가상 DOM을 조작하고 UI를 업데이트

3. 장점

• 빠른 초기 로딩: 최초에 필요한 HTML만 받아오기 때문에 초기 로딩이 빠름
• 클라이언트 측에서 렌더링되므로 더 동적인 UI를 구현 가능

4. 단점

• 검색 엔진 최적화(SEO)가 상대적으로 어려움
• 초기 로딩 이후에 JavaScript가 로딩되어야 하므로 초기 로딩 시간이 길어질 수 있음

SSR (Server Side Rendering)

1. 개념

• 서버에서 페이지를 완전히 렌더링하여 클라이언트에게 전달하는 방식
• 클라이언트는 초기에 렌더링된 HTML을 받아오고, 이후에 필요한 경우에만 JavaScript를 사용하여 상호작용적인 부분을 처리

2. 프레임워크

• Next.js (React 기반): 필요한 페이지의 HTML을 서버에서 미리 렌더링하여 제공

3. 장점

• 검색 엔진은 초기에 완전한 HTML을 받아오기 때문에 검색 엔진 최적화(SEO)가 용이
• 초기 로딩 시간이 CSR에 비해 빠름

4. 단점

• 초기 로딩이 빠르지만, 이후에 동적인 부분을 처리하기 위해 서버와의 추가적인 통신이 필요할 수 있음

예시 시나리오

1. CSR: 사용자가 페이지를 요청하면 서버에서는 초기 HTML을 제공하고, 이후 JavaScript로 인해 페이지가 동적으로 업데이트된다. 예를 들어, React로 만든 SPA (Single Page Application)가 이에 해당한다.

2. SSR: 사용자가 페이지를 요청하면 서버에서 해당 페이지를 완전한 형태로 렌더링하여 HTML을 반환한다. 예를 들어, Next.js에서 페이지를 사전 렌더링하여 제공하는 경우가 이에 해당한다.

 

📌 Flutter로 빌드한 웹페이지는 CSR인가, SSR인가?

Flutter는 기본적으로 Client Side Rendering (CSR) 방식을 사용한다. Flutter는 모바일 앱을 위한 프레임워크로 시작되었으며, 그 후에 웹 및 데스크톱 플랫폼도 지원하기 시작했다.

CSR 방식에서는 초기에 빈 페이지가 로드되고, 그 후에 JavaScript 코드가 실행되어 앱의 구성 요소들이 동적으로 렌더링되는데 Flutter for Web에서도 이와 유사한 방식으로 동작하며, 웹 페이지가 로드되면 Dart 코드를 통해 클라이언트 측에서 앱이 렌더링된다.

Flutter for Web은 Dart 언어로 작성되었고, Dart 코드는 클라이언트 측에서 실행되어 사용자 인터랙션에 따라 동적으로 UI를 업데이트한다. 이러한 특성으로 인해 Flutter for Web은 CSR 방식의 렌더링을 따른다.

다만, 프레임워크나 라이브러리에 따라 특정한 설정이나 확장을 통해 Server Side Rendering (SSR)을 구현할 수 있는 경우도 있다. 하지만 Flutter의 주요 설계는 CSR에 기반하고 있다.