Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Blazor'da .NET 8'den .NET 11'e Gelenler: Web App Modeli, RendererInfo, PersistentState, NotFound ve .NET 11 Yenilikleri
.NET 8 Blazor'u component başına render mode'lu tek bir Web App modeline taşıdı; .NET 9 ve 10 bu modelin boşluklarını kapattı, .NET 11 ise Static SSR'ı, URL tabanlı QuickGrid'i ve circuit auto-pause'u getirdi. Bookstore panelini .NET 11'e yükselttik: [ValidatableType] için bir using, yeni BL0013/BL0016 analyzer'ları, UseWebAssemblyDebugging'in kalkması ve .NET 10 LTS ile .NET 11 STS'nin aynı gün bitmesi.
Blazor'u Production'a Taşımak: WASM Boyutu, Trimming, AOT, Circuit Kaynakları, Reconnection UI ve Hosting
Blazor'u production'a taşırken iki maliyet ölçülür: WebAssembly'de ilk ziyarette inen veri (Bookstore panelinde 2,3 MB, AOT ile 4,3 MB ama CPU işinde yaklaşık altı kat hızlı) ve Server'da circuit başına bellek (stok sayfasında yaklaşık 800 KB, kapanan sekme üç dakika bellekte). Yazıda trimming ve relinking, fingerprint'li cache, CircuitOptions, ReconnectModal, nonce'lu Content Security Policy ve Nginx arkasında WebSocket ayarı gerçek ölçümlerle.
Blazor'da Authentication ve Authorization: AuthenticationStateProvider, AuthorizeView, Render Mode'a Göre Auth ve Passkey'ler
Blazor'da kullanıcı AuthenticationStateProvider'dan gelir: InteractiveServer'da circuit kurulurken cookie'den alınır ve sabit kalır, WebAssembly'ye ise yalnız name ve role claim'leri serileştirilir; bu yüzden AuthorizeView bir UI kararıdır, güvenlik endpoint'te ve API'de sağlanır. Bookstore panelinde Identity ile login, fallback policy, rol bazlı fiyat düzenleme, panelin imzaladığı token'larla korunan API ve .NET 10 template'indeki passkey desteği.
Blazor'da JavaScript Interop: IJSRuntime, Collocated JS Module, DotNetObjectReference ve .NET 10 Yenilikleri
Blazor'da JS, component'in yanındaki .razor.js module'ü olarak import edilip IJSObjectReference ile çağrılır; JS'ten .NET'e dönüş DotNetObjectReference ve [JSInvokable] ile yapılır, prerendering'de JS olmadığı için çağrılar OnAfterRenderAsync'te başlar. Bookstore panelinde Chart.js ile satış grafiğini .NET 10'daki InvokeConstructorAsync, GetValueAsync ve SetValueAsync ile kuruyor, ISBN kopyalama düğmesini, JSDisconnectedException'ı ve 32 KB mesaj sınırını gerçek çıktılarla gösteriyoruz.
Blazor'da DI, State ve Veri Erişimi: Service Lifetime'ları, Circuit Scope, DbContext ve Auto Mode için Ortak Abstraction
Blazor'da Scoped service InteractiveServer'da circuit boyunca, WebAssembly'de sekme boyunca yaşar; bu yüzden circuit'te DbContext IDbContextFactory ya da OwningComponentBase ile kullanılır, Auto mode'da veri erişimi bir interface'in iki implementasyonuyla çözülür. Bookstore panelinde Singleton'da paylaşılan teklifi, circuit boyunca yaşayan context'in eski verisini, Bookstore.Data kararını, IBookCatalog'u ve .NET 10'daki WebAssembly response streaming değişikliğini gösteriyoruz.
Component Tasarımı: RenderFragment, Templated Component, Generic Component, CascadingValue, CSS Isolation ve bUnit
Blazor'da yeniden kullanılabilir component RenderFragment ve @typeparam ile kurulur; @key satır state'ini doğru item'a bağlar, ShouldRender gereksiz render'ı keser, cascading value'lar ise render mode sınırını geçmez. Bookstore panelinde generic bir DataTable, @key olmadan yanlış satıra kayan input, 42'den 4'e inen render sayısı, WebAssembly'de null kalan cascading value, QuickGrid, Virtualize ölçümü, ::deep ve bUnit testlerini gerçek çıktılarla gösteriyoruz.
Blazor'da Form'lar ve Validation: EditForm, Input Component'leri, DataAnnotations ve .NET 10 Nested Validation
Blazor'da form EditForm ve EditContext ile kurulur, kurallar DataAnnotations attribute'larıyla modelde durur; .NET 10'da AddValidation ve [ValidatableType] ile nested nesneler ve listeler de doğrulanır. Bookstore panelinde kitaplarıyla birlikte yazar ekleyen form'u, ISBN kontrol hanesi için custom attribute'u, API'nin 400 hatalarını ValidationMessageStore ile doğru alana bağlamayı ve Static SSR form'unun ne zaman doğrulandığını gerçek çıktılarla gösteriyoruz.
Prerendering ve State Persistence: Çift Yükleme Sorunu, [PersistentState] ve Circuit State'i
Prerendering açık interaktif bir component iki instance olarak çalıştığı için veri iki kez yüklenir; .NET 10'daki [PersistentState] prerender'da yüklenen değeri sayfaya gömüp interaktif instance'a taşır ve aynı attribute circuit duraklayıp geri geldiğinde state'i korur. Bookstore panelinde çift API çağrısını ve tablonun yanıp sönmesini ölçüp gideriyor, RestoreBehavior ile taze kalması gereken veriyi ayırıyor, WebAssembly'de persist edilen state'in sayfa kaynağında düz JSON olduğunu gösteriyoruz.
Interaktivite Olmadan Blazor: Static SSR, Streaming Rendering, Enhanced Navigation ve Form Post'ları
Static SSR'da Blazor component'i her istekte sunucuda render edilip düz HTML olarak gönderilir; etkileşim link, query string ve form post'larıyla kurulur, [StreamRendering] iskeleti hemen gönderip veriyi aynı yanıtın sonuna ekler. Bookstore panelinde kitap arama ve sayfalamayı, enhanced navigation'ı, antiforgery korumalı stok sayım formunu, .NET 10'daki NotFound() ile 404'ü ve .NET 11'de gelen TempData'yı gerçek çıktılarla gösteriyoruz.
Render Mode'lar Derinlemesine: Static SSR, InteractiveServer, InteractiveWebAssembly, InteractiveAuto ve Prerendering
Render mode component tanımında, kullanıldığı yerde ya da tüm uygulama için verilir, alt component'lere yayılır ve interaktif bir component'in içinde başka bir interaktif moda geçilemez; Static parent'tan giden parametreler JSON'a serileştirilip HTML'e yazılır. Bookstore paneline WebAssembly'de çalışan bir teklif hesaplayıcısı ekleyip ChildContent hatasını, sessizce kaybolan EventCallback'i, prerender'ı kapatmayı ve .Client'a konan her şeyin tarayıcıda göründüğünü gerçek çıktılarla gösteriyoruz.
Razor Component Temelleri: Parametreler, Event Handling, Data Binding ve Component Lifecycle
Razor component dışarıdan [Parameter] ile değer alır, parent'a EventCallback ile haber verir, @bind ile input'a bağlanır ve ComponentBase'in lifecycle method'ları belli bir sırayla çalışır; prerendering açıksa OnInitializedAsync iki kez çağrılır. Bookstore yönetim panelinin stok ekranını BookList, BookRow ve LowStockBadge ile kurup @bind:after, @bind:get/set, async handler'da render ve InvokeAsync gerektiren zamanlayıcıyı gerçek log'larla ve Angular karşılıklarıyla gösteriyoruz.
İlk Blazor Web App: Template Seçenekleri, Proje Yapısı, App.razor, Routes.razor ve Hot Reload
dotnet new blazor'ın --interactivity seçeneği WebAssembly ya da Auto'da tarayıcıya inecek kodu ayrı bir .Client projesine koyar; Program.cs'teki iki kayıt ve MapRazorComponents<App> endpoint'leri üretir, App.razor ile Routes.razor sayfanın iskeletini ve routing'i kurar. Bookstore.Admin'i central package management kullanan Bookstore.slnx'e ekliyor, @page ile route parametresi ve constraint'leri, dotnet watch ile hot reload'u ve .NET 11 template farklarını gerçek çıktılarla gösteriyoruz.