私は主に WPF などの windows 環境向けのアプリケーションを今でもよく作るプログラマーなのですが、Blazor に触る機会ができたので、とても基本的なところからどういったものなのか、「Blazor入門」を読みつつ、学習した内容をアウトプットしたいと思います。
Blazor とは？
まず、Blazor（ブレイザー）と読むみたいです。ブラザーじゃない。
名前の由来は「Browser（ブラウザ）+ Razor（レイザー）」というところからなので、ブレイザー。「ブラウザ上で Razor 構文の使える .NET による web アプリ」という感じです。
発展的に現れたものなので、この時点で知らないワードとして Razor というものが現れているかもしれません。知らないワードは、あまり無視しないようにしたほうが後々よいです。
このほかにも、Blazor の特徴を挙げるときに SPA (single page application) であるという説明があります。素直に受けると「１ページのアプリケーションなんて、シンプルなもの限定なのかな？」ってなると思います。
WebAssembly っていう用語も近年の HTML5 以降の web を知らないと、変な誤解につながるかもしれません。
この記事は、学習の「あいうえお」を始めるその手前、筆記用具の確認のあたりに該当します。ゆっくりと学習をはじめましょう。
Razor に関する補足説明
Blazor の前に Razor とは C# や VB.NET のプログラミング言語で動的な web ページを作成するための「プログラミング構文 (programming syntax)」のことです。
簡単な Razor のプログラミング構文を挙げることにします。「（HTML 上に）@文字を使用して、ページにコードを追加する機能」があります。
@{ var total = 7; }
@{ var myMessage = "Hello World"; }
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
The value of your account is: 7 The value of myMessage is: Hello World The greeting is Welcome to our site! Today is: （今日の曜日）
@ を使うと HTML 上に変数を持ったり、（C#の）コードブロックを作ったりすることができています。これが Razor 構文（のひとつ）というわけです。
なので Razor という名前を継承して、Blazor という名前になっていますので、どういったプログラミングの構文を使えるのか、予測/推測できるようにしてくれている名前になっています。（……が、経緯/歴史を知らないと命名された意図を調べないとわからないので注意）
SPA とは？
Blazor は SPA (single page application) である特徴を持ちます。素直に受けると「１ページしかないアプリケーションなんて、シンプルなもの限定なのかな？」ってなると思います。
でも、実際は、（サンプルを含む visual studio 標準の）プロジェクトを作成した時点のプログラムでも複数のページを持っているように見えるはず。
これは、メニューをクリックしたときに、画面遷移したい次のページを、サーバーに HTML データのリクエスト＆ダウンロードをせずに画面遷移しています。動作は軽快です。（半面、最初にページを表示するときは、普通の HTML ページよりも重たい動きをするかもしれません）
（実のところは）１つのページで動いているよ、という技術的な特徴を紹介するワードが SPA です。
SPA を支える技術は、従来だと JavaScript（や TypeScript）で行われるようなものでした。これは、ブラウザ上で動作するプログラミング言語が JavaScript に長年限定されていたことで、「JavaScript = DOM（ドキュメントオブジェクトモデル）を操作できるもの」のような状態でした。
しかし、Blazor のアプリケーションを作成するため Visual Studio などでプロジェクトを作成しようとすると「WebAssembly」という用語がプロジェクトテンプレートに書いてあることに気づきます。
「（このプロジェクトは）WebAssembly 上で実行され～」という説明があります。SPA を支える JavaScript 上で実行されるのではないのでしょうか。どういうことなのか？
WebAssembly とは？
WebAssembly は、JavaScript と同じように「ブラウザ上で動作するプログラミング言語」として、2017 年３月に Firefox が対応し、現在は主要なブラウザすべてがサポートするに至りました。
つまり、DOM を操作できる（実質的に）第二のブラウザ上で動作するプログラミング言語というわけでした。
JavaScript と大きく異なるポイントは、高速に動作するバイナリコードである、ということです。
なんで、JavaScript のように直接メモ帳なんかでコーディングする……というよりも、WebAssembly は、いろいろな言語をコンパイルした結果、WebAssembly 言語に翻訳されて動作する、というケースのほうが近いものだと思います。
Blazor もその例に当てはまり、「WebAssembly 上に .NET 言語を動作させるモジュールが動作して」Blazor として機能するといった形になります。
Blazor プロジェクトの作成
ここまでの説明で Visual Studio で Blazor WebAssembly App というプロジェクトを作成する、というところまでに出現した用語の基本的な知識を説明してきました。
WPF のようなアプリケーションよりも、Blazor のアプリケーションは、スタート時点のプロジェクト構成が複雑だと思います。
新規プロジェクト（ソリューション）を作成すると、「クライアント」＋「サーバー」＋「共有」プロジェクトが３つあります。（WPF や Windows Forms など、旧来の GUI プロジェクトはシンプルでした。ひとつのソリューションに、ひとつのプロジェクトからスタートできました）
なので、どのようにプロジェクトが振る舞っているのか理解をしながら学習を進めていくとよいと思います。
どうして「クライアント」側のプロジェクトからスタートするのか、といった調子です。
わかりやすい特徴として、「クライアント」プロジェクトは、Visual Studio のデバッグ機能のひとつブレークポイントを設定しても正しく機能しません。
これは、ブラウザ上の WebAssembly で実行されているからで（ブレークポイントを見に行ける）HTTP サーバーは、ブラウザに Blazor アプリを配信したあとはブラウザのデバッグ機能に任せる他ありません。
一方で、「サーバー」プロジェクトは、ブレークポイントを設定すると正しく機能します。サーバーのリソースを利用する場合は、基本的に「サーバー」プロジェクトを選択する必要があります。
実際的には、どちらで DB にアクセスするのか、といった部分につながってくる。
