Blazor Server의 수명?에 대해 질문이 있습니다.

Blazor Server 에 대해 공부하면서 의문점이 생겼습니다.
Blazor Server에 대한 설명으로 공식문서에는 다음과 같이 작성되어 있습니다.

UI 업데이트, 이벤트 처리 및 JavaScript 호 출은 WebSockets 프로토콜을 사용하여 SignalR 연결을 통해 처리됩니다. 연결된 각 클라이언트와 연결된 서버의 상태를 회로라고 합니 다. 회로는 특정 네트워크 연결에 연결되지 있지 않으므로 일시적 네트워크 중단 및 연결이 끊어진 후 클라이언트의 서버 재연결 시도를 허용할 수 있습니다.
전형적인 서버 렌더링 앱의 경우, 여러 브라우저 화면(탭 또는 iframes)에서 동일한 앱을 열어도 일반적으로 서버의 리소스 수요가 증가 하지 않습니다. Blazor Server 앱의 경우, 각 브라우저 화면에 개별 회로 및 별도의 서버 관리 구성 요소 상태 인스턴스가 필요합니다.

이 글을 읽고 제가 이해한 것은 다음과 같습니다.

  1. 앱은 클라이언트와 Signal R 을 통해 연결되고 이 연결을 회로라고 부른다.
  2. 앱의 button, input 등과 같은 요소들은 회로 라고 불리는 통로로 서버와 연결되며 서버에는 각 요소의 상태를 관리하기 위한 각각의 컴포넌트 상태 인스턴스가 존재한다.
    예를들어 button1, button2, input 1, input2가 있다면 button1 state, button2 state, input 1 state, input2 state라는 컴포넌트 상태 인스턴스가 DOM의 요소와 매핑되어 서버에 생성된다.
  3. 연결된 앱(tab 또는 iframe 등)의 개수 만큼 회로가 존재하기 때문에 많은 앱이 연결된다면 컴포넌트 상태 관리 인스턴스도 증가한다.
  4. 앱이 정상 종료되면 앱과 관련된 회로는 끊어지고 컴포넌트 상태 관리 인스턴스는 해제된다.
    비정상 종료라면 회로는 일정시간 유지되며 재연결을 기다리지만 시간이 끝나면 리소스가 해제된다.

이렇게가 제가 이해한 내용인데 틀린부분이 있을까요?

4개의 좋아요

제가 이해한 지식을 바탕으로 설명해드리겠습니다.

  1. 앱은 클라이언트와 SignalR을 통해 연결되고 이 연결은 회로라고 부른다.
  • 맞습니다.
  1. 앱의 button, input 등과 같은 요소들은 회로 라고 불리는 통로로 서버와 연결되며 서버에는 각 요소의 상태를 관리하기 위한 각각의 컴포넌트 상태 인스턴스가 존재한다.
  • 아닙니다. 여기서 컴포넌트(구성요소)의 상태 인스턴스는 element(요소)와 다르게 생성됩니다. 여기서 컴포넌트란 Markup(HTML), CSS, C#(원래는 JS여야 하겠죠)를 합친 재사용 가능한 커스텀 UI 요소로 만들어지는 것입니다.
  • Blazor 앱은 Razor 구성 요소 , 비공식적으로 Blazor 구성 요소로 알려진 구성 요소 로 빌드됩니다. 구성 요소는 동적 동작을 사용하도록 설정하는 처리 논리가 있는 UI(사용자 인터페이스)의 자체 포함 부분입니다. 구성 요소는 프로젝트 간에 중첩, 재사용, 공유될 수 있으며 MVC 및 Razor Pages 앱에서 사용될 수 있습니다.

    ASP.NET Core Razor 구성 요소 | Microsoft Learn

  • 이를 통해 서버 관리 구성요소(컴포넌트) 상태 인스턴스가 필요하다는 것은 Blazor Server는 클라이언트의 상태를 서버와 sync하면서 각각의 클라이언트 상태를 각각 따로 갖고 있다는 것을 알 수 있습니다.
  1. 연결된 앱(tab 또는 iframe 등)의 개수 만큼 회로가 존재하기 때문에 많은 앱이 연결된다면 컴포넌트 상태 관리 인스턴스도 증가한다.
  • 맞습니다. 연결된 클라이언트 수만큼 회로가 존재하기 때문에 많은 앱이 연결된다면 인스턴스의 양도 증가하겠죠. 하지만 하나의 앱에서 컴포넌트가 생성되고 파괴되기 때문에 인스턴스가 무한정으로 증가하지 않는다는 점을 아셔야 합니다.
  1. 앱이 정상 종료되면 앱과 관련된 회로는 끊어지고 컴포넌트 상태 관리 인스턴스는 해제된다. 비정상 종료라면 회로는 일정시간 유지되며 재연결을 기다리지만 시간이 끝나면 리소스가 해제된다.
  • 맞습니다.
8개의 좋아요

아 그럼 컴포넌트 내부의 각 요소마다 컴포넌트 상태 관리 인스턴스가 생기는것이 아니라 하나의 컴포넌트에 하나의 컴포넌트 상태 관리 인스턴스가 생기는건가요?
예를들어 다음과 같은 컴포넌트가 있을 때 id, pw, btn 각각 상태관리 인스턴스가 생성되는 것이 아닌 login컴포넌트와 매핑되는 상태 관리 인스턴스 하나만 생성되고 관리되는건가요? 만약 한 페이지안에 동일한 컴포넌트가 2개이상 존재한다면 두개이상의 상태 관리 인스턴스가 생성되는것이구요.

3개의 좋아요

네, 맞습니다.

4개의 좋아요

감사합니다!

3개의 좋아요

인스턴스의 생성 부분은 서비스 타입, 인터페이스 사용과 관련있으며, 그에 따라 달라집니다.
서비스 타입에 대한 자세한 내용은 아래 링크를 참조하시거나 구글링을 추천드립니다.
https://www.c-sharpcorner.com/article/understanding-addtransient-vs-addscoped-vs-addsingleton-in-asp-net-core/

요약:

5개의 좋아요

조금 다른 이야기 일 수 있는데요,
기본적으로 Blazor Server는 복잡한 화면을 구성할 경우 매우 속도가 느려지는 부분이 있습니다.
해당 부분이 위에 이야기 된 상황으로 인하여 발생하는 케이스로 생각하고 있습니다.

Blazor 시작하기 전에 Reddit에서 확인한 결론으로는
Blazor Server가 Blazor wasm에 비해서 성능적으로 좋지 못하다는 것입니다.

처음 Blazor 시작할 때 Blazor Server로 진행하다가 위와 같은 이유로 현재는 Blazor wasm으로 진행하고 있습니다.

Blazor wasm으로 할 경우 코드 양이 비약적으로 증가합니다.
일반 Javascript SPA와 개발할 때와 동일한 구조가 나옵니다.

Blazor Server로 개발할 경우 코드 양이 비약적으로 줄어 듭니다.

현재는 위와 같이 결론에 도달한 상태입니다.

5개의 좋아요

나중에 시간이 날 때 다룰려고 했던 주제지만 이야기가 나와서 잠깐 말씀 덧붙이자면,

Blazor Server와 Blazor WASM의 차이는 현재 JS SPA 종류 라이브러리(ex. React, Vue…)를 사용할 때 생기는 이슈와 비슷하다고 생각합니다. 그에 따라서 다음과 같은 장단점이 생깁니다.

  • SPA(Blazor WASM, JS에서는 React/Vue가 되겠네요.)
    • 처음 UX가 별로일지는 몰라도 이후 UX는 파일을 핵심 파일을 모두 다운받았기 때문에 좋습니다.
    • SEO가 페이지별로 되지 않습니다. 동적으로 최적화를 할 수 있다고 구글은 말하지만 SSR의 SEO는 따라잡을 수 없습니다.
  • SSR(Blazor Server, JS에서는 Next/Nuxt가 되겠네요.)
    • 처음 UX가 별로지만 서버에서 렌더링을 해서 보내주는 것이므로 이후 UX가 좋다고는 볼 수 없습니다.
      • JS는 hydration을 사용하지만 Blazor Server는 SignalR을 통해 어플리케이션마다 연결하기 때문에 서버 리소스를 더 잡아먹을 수도 있습니다.
    • 하지만 SEO를 할 수 있다는 장점이 있습니다.

이후 slog를 이용해서 현재 프론트엔드의 렌더링 트렌드는 어떻게 흘러가고 있는지와 Blazor와는 어떤 관계가 있는지를 적어보려고 하는데 자꾸 늦춰지고 있네요. 자세한 건 게시물을 올리면 거기에 적겠습니다 :slight_smile:

8개의 좋아요