Backend.Net Core

.Net Core Blazor

,

Blazor 란?

Microsoft가 2018년 2월에 발표한 Blazor는 C#과 Razor(ASP.NET에서 사용하는 뷰 엔진), HTML을 사용해 웹 UI를 만들 수 있는 .NET 웹 프레임워크 기술 집합 이다.

Blazor 종류

  • Blazor WebAssembly
    • CSR (Client Side Rendering) 방식
  • Blazor Server
    • SSR (Server Side Rendering) 방식

Blazor 이점

  • JavaScript가 아닌 생산성 높은 C#으로 개발할 수 있음
  • .NET 라이브러리를 사용할 수 있음
  • .NET의 수준높은 보안, 안정성, 성능을 제공
  • 서버와 클라이언트의 로직을 공유할 수 있음
  • Windows, Linux, macOS에서 VisualStudio를 사용하여 개발 가능
  • 초기 셋팅 관련은 클라이언트 환경에 비해 진입 러닝커브가 많이 낮음
  • 프레젠테이션 컴포넌트화 부분 공통화 재사용이 가능
  • 코드단에서 Controller와 View를 역할 분리 가능
  • css를 컴포넌트 별도 격리화 가능
  • 트리쉐이킹 가능
  • ‘.Net Core MVC 구조 + 부분 Blazor 조합 가능’ | | ‘Blazor 구조 + 부분 .Net Core MVC 조합 가능’

Blazor 단점

  • MS 공식문서를 제외한 다양한 Best Practices 참고 검색 자료 아직은 다소 부족함

Blazor WebAssembly 특징

  • 장점
    • .NET 서버의 의존성 없음
    • 클라이언트 리소스 및 기능을 완벽하게 활용 가능
    • 서버의 부담을 클라이언트로 전담
    • PWA 지원
  • 단점
    • SEO 불가
    • 아직 미성숙한 퍼포먼스 성능 (추후 성능 퍼포먼스는 지속적으로 최적화되고 개선될 부분임)
    • 브라우저에서 Blazor를 실행하려면 애플리케이션의 .wasm 및 .NET 라이브러리를 브라우저로 다운로드해야 할뿐만 아니라 Blazor가
      실행되는 .NET 런타임인 Mono.wasm도 다운로드해야 한다. Mono.wasm은 캐시될 수 있지만 이러한 자산을 처음 다운로드를 하면 애
      플리케이션의 시작이 지연되는데 테스트 결과 현재 시점에서 CSR 방식은 초기 로딩 성능이 많이 느림
    • DOM 요소를 직접 조작할 수 없다. 경우에 따라 클라이언트 앱은 HTML 요소를 많이 제어하는데, Blazor는 이 기능을 자체적으로 제
      공하지 않기 때문에 이 간격을 메우려면 JavaScript Interop 을 사용해야 하는데 대부분 현재 JavaScript로 처리하는 것 보다는 성능이
      느림
    • .NET 툴링 미지원 (예 : .NET 표준 지원 및 디버깅의 제한 사항)
    • 모든 브라우저에서 지원범위 주의 필요

Blazor Server 특징

  • 장점
    • RenderMode 선택 가능
    • 클라이언트 측 앱보다 앱 크기가 훨씬 적으므로 훨씬 빠르게 로드되어 동작
    • .NET Core 호환 API 사용을 포함하여 서버 기능을 최대한 활용 가능
    • 서버의 .NET 코어에서 실행되므로 디버깅과 같은 기존 .NET 도구 작동
    • 씬 클라이언트와 함께 작동 (WebAssembly 및 자원이 제한된 장치를 지원하지 않는 브라우저에서 작동함.)
    • 앱의 구성 요소 코드를 포함한 .NET / C # 코드 기반은 클라이언트에 제공되지 않음
  • 단점
    • ASP.NET 코어 서버가 필요. 서버가없는 배포 (예 : CDN)는 불가능

Blazor Server 와 Blazor WebAssembly Application 의 차이점

구분 Blazor WebAssembly Blazor Server
서비스 등록 Program.cs Startup.cs
엔트리 파일 index.html _Host.cshtml
웹 API 호출 (built-in) 미리 구성된 HttpClient 서비스를 사용하여 웹 API를 호출 IHttpClientFactory 를 사용하여 만드는 HttpClient 인스턴스를 사용하여 웹 API를 호출
  1. index.html, _Host.cshtml
    a. wwwroot 폴더를 보면 Blazor WebAssembly App은 index.html 파일이 없고, Blazor 서버 앱은 없다.
    b. index.html파일은 blazor.webassembly.js 파일을 참조하고, application의 모든 파일을 다운로드 한다.
    c. 이와 비슷한 일은 Blazor 서버 앱 Page/_Host.cshtml 파일에서 발생한다. 이 파일에서 참조하는 blazor.server.js 파일은 client WebSocket
    connection을 담당한다.
    d. 그 외 Counter, Index, FetchData 파일이 동일하게 들어가 있으며, 이것은 component files를 재사용 할 수 있다는 뜻이다.
  2. setting
    a. Blazor 서버 앱은 Startup.cs, appsettings.json 파일이 있고, Blazor WebAssembly App에는 없다.
    b. Blazor WebAssembly App에서 서비스를 등록하기 위해서는 Program.cs 파일을 사용해야 한다.
공유하기