필자 환경
OS : Windows 10
IDE : Visual Studio 2019
Blazor는 Visual Studio 2019에서 개발할 수 있다.
템플릿도 존재한다.
Blazor 앱을 선택한다.
저장 위치를 설정하고 나면 갑자기 둘 중 하나를 선택해야 하는 창이 나온다.
이게 뭔가...
참고로 만약 Blazor WebAssembly App 나오지 않는다면 Visual Studio를 최신버전으로 업데이터 해야 한다.
Blazor Server App은 2019버전부터 지원하는데, Blazor WASM은 2020년 5월에 추가되었다.
자.. 우리는 Blazor Server 와 Blazor WebAssembly app 중 하나를 선택해야 한다.
차이점을 알아야 선택할 수 있지 않을까?
차이점
아주 쉽고 간단하게 결론부터 말하면 Blazor Server App은 Server Side 개념, Blazor WebAssembly App은 Client Side 개념으로 이해하면 된다.
다시 말해, 우리가 만든 C# 코드가 서버에서 실행되냐 클라이언트에서 실행되냐 의 차이이다.
좀더 자세히 설명을 하자면 다음과 같다.
Server Model
1. C#코드가 서버에서 실행된다.
2. Javascript hooks는 DOM에 액세스하는데 사용한다.
3. SignalIR을 사용하여 브라우저와 서버 간에 정보를 바이너리로 주고받는다.
4. 만약 무언가가 변경되면 서버는 DOM 업데이트 메시지를 다시 보낸다.
WebAssembly Model
1. 클라이언트의 부러우저에서 실행된다.
2. 웹 요청 중 첫 번째 요청은 CLR, 어셈블리, JavaScript, CSS를 다운로드하는 요청이다.
3. 보안 WASM 샌드박스에서 실행된다.
4. Blazor Javascript 핸들러는 Dom에 액세스한다.
참고 SignalIR ??
SignalIR은 Blazor의 필수 부분이기 때문에 꼭 알아야 하며, 다음 기능을 제공한다.
1. 무료 오픈 소스이다.
2. 지속적으로 연결되어 비동기 메시지를 보낸다.
3. 연결은 양방향
SignalR 웹 소켓은 포트 80을 사용하며, 이는 서버에서 Azure SignalR Service로 오프로드 될 수 있으며,이를 통해 하루에 10 만 명의 동시 사용자와 1 억 개의 메시지가 허용된다. 무료 오퍼링은 하루에 20 명의 동시 사용자와 20,000 개의 메시지를 허용한다.
그래서 뭘 선택해야 하나? 장단점을 보자!
Blazor Sever App
장점
로딩이 WASM보다 빠르다.
데이터베이스 또는 클라우드 기반 서비스와 같은 보안 리소스에 대한 엑세스가 가능하다.
클라이언트에서는 IE11처럼 WASM을 지원하지 않는 브라우저에서도 상관없이 돌아간다.
C#코드가 클라이언트쪽으로 전송되지 않기 때문에 보안에 유리하다.
단점
데이터 전송으로 인한 추가 대기 시간이 있다.
오프라인 지원이 안된다.
확장성이 어렵다.
서버가 필요하다.
Blazor WebAssembly App
장점
UI코드가 빠르게 처리된다.
오프라인을 지원한다.
CDN을 통해 배포가 가능하고 서버가 불필요하다. (API 제외)
모든 .net 표준 2.0 C#을 실행할 수 있다.
단점
보안 리소스에 액세스 하려면 API레이어가 필요하다.
디버깅이 어렵다.
그래서 결론은...
많은 수의 사용자를 상대해야 하고 보안이 중요하지 않고 성능이 중요하다면 WASM
조금 느려도 보안이 중요하다면 Server!!
아직 이해가 다 안됬다면.. 몇 가지 테스트를 해보자!
테스트는 Github에 있는 데모 코드를 가지고 테스트를 한다.
-Github Url
https://github.com/WolfgangOfner/Blazor-ServervsClient
4개의 프로젝트가 있다.
참고로 템플릿을 선택할 때 만약 blazor Server를 선택했다면 첫번째 프로젝트처럼 하나의 프로젝트가 만들어질 것이고, Blazor WASM을 선택했다면 2-4 프로젝트 3개(Client, Server, Shared)의 프로젝트가 자동 생성된다.
솔루션 - 속성에서 실행할 프로젝트를 설정하고 실행하면 BlazorServer 프로젝트가 실행된다.
1. Blazor Server Test
먼저 Server를 실행한다.
브라우저의 디버그의 네트워크를 보면 서버와 브라우저 간의 SignalIR 메시지를 확인할 수 있다.
브라우저가 서버에게 요청하는 형태이다.
2. Blazor WASM Test
다음은 WASM을 실행해본다.
Visual Studio에서 실행 프로젝트를 변경하고 실행하면 된다.
마찬가지로 디버깅을 해서 Console을 보면 클라이언트에서 실행될 수 있도록 많은 dll 파일이 전송된 것을 볼 수 있다.
데모코드에서는 6.15M 가 전송되었다.
참고로 릴리즈 모드로 하면 약 2.3M의 파일이 전송된다. 릴리스모드에서는 링커가 켜져서 필요한 파일만 전송되기 때문이다.
그리고 동시 연결 지원은 다음과 같다.
- CPU가 1 개이고 램이 3.5GB 인 서버는 5k 동시 연결 지원
- CPU가 4 개이고 RAM이 14GB 인 서버는 2 만 개의 동시 연결 지원
이해가 되었는지....??