Blazor oluşturma modları: pratik kılavuz

İşleme modu seçiminden önce

Blazor aslında nedir?

Blazor, Microsoft'un .NET web uygulamalarına yönelik bileşen çerçevesidir. Kullanıcı arayüzünü Razor bileşenlerinden oluşturursunuz, çoğu etkileşim mantığını C# dilinde yazarsınız ve ASP.NET Core'un bu bileşenleri sunucuda, WebAssembly'de veya yerel bir uygulama kabuğunun içinde işlemesine izin verirsiniz.

Eski ASP.NET fikirlerinden doğdu. Web Forms, web'i sunucu kontrollerinin arkasına gizlemeye çalıştı. MVC ve Razor Pages, istek-yanıt HTML'sini daha temiz hale getirdi. Blazor, yeniden kullanılabilir etkileşimli bileşenler ekler ancak MVC veya Razor Sayfalarını basit içerik sayfaları ve formları için geçersiz kılmaz.

Blazor'dan önce

Web Formları, MVC ve Razor Sayfaları farklı sorunları çözdü Razor Pages

Web Forms üretken olmasına rağmen ağır ve durum bilgisi olan bir yazılımdı. MVC ve Razor Pages, daha temiz HTML ve daha basit istek yönetimi sağladı. Bir sayfa çoğunlukla veri okuduğunda, form gönderdiğinde ve HTML döndürdüğünde hala iyidirler.

Blazor'un eklediği şeyler

Bileşenler kullanıcı arayüzü mantığını işaretlemeye yakın tutar

Bir Razor bileşeni işaretlemeyi, parametreleri, olayları, doğrulamayı, enjekte edilen hizmetleri ve yerel durumu içerebilir. Bu, sayfanın tam olarak yeniden yüklenmeden değiştiği kontrol panelleri, düzenleyiciler, sihirbazlar, ızgaralar ve araçlar için kullanışlıdır.

Sonra ne geldi?

Modern .NET, oluşturma modlarını karıştırmanıza olanak tanır

Daha yeni Blazor uygulamaları, sunucu tarafından oluşturulan statik HTML'yi etkileşimli bileşenlerle birleştirebilir. Bu önemlidir, çünkü bir sayfa taranabilir içeriğe ihtiyaç duyarken diğer bir bölüm canlı bir bileşene ihtiyaç duyabilir.

İçindekiler

Buradan başlayın

Yararlı kısa versiyon

Blazor tek bir mimari değil. Çeşitli işleme modlarına sahip tek bileşenli bir modeldir. Doğru seçim, söz dizimine daha az, durum, gecikme, bellek ve taranabilir bağlantıların nerede yaşadığına daha çok bağlıdır.

Sunucu

Blazor Sunucusu durum bilgilidir

İlk yüklemede hızlı hissedilebilir ancak sunucu devreleri canlı tutar. Trafik artmadan önce belleği planlayın, davranışı yeniden bağlayın ve ölçeği genişletin.

Tarayıcı

WebAssembly ön ödeme yapar

Canlı sunucu devrelerini kaldırır ancak ilk ziyarette çalışma zamanı ve uygulama indirilir. Önbellek, kırpma ve ön işleme önemli.

Yerli

Hibrit bir ürün kararıdır

Uygulamanın gerçekten bir masaüstü veya mobil kabuğa ihtiyacı olduğunda Hibrit'i kullanın. Herkese açık içerik için web oluşturmayı ve gerçek URL'leri kullanın.

Blazor Sunucu

Blazor Sunucusu tıklamalar arasında çalışmayı canlı tutar

Blazor Sunucusu normal durum bilgisi olmayan bir istek-yanıt sayfası değildir. Bağlı bir tarayıcı sekmesi bir devre alır. Sunucu, kullanıcı bağlıyken ve genellikle bağlantı kesildikten sonra kısa bir yeniden bağlanma penceresi boyunca söz konusu devre için bileşen durumunu ve kapsam dahilindeki hizmetleri tutar.

Bellek aktif devrelerle birlikte büyür

Bağlı her sekmenin bir devresi vardır. Bileşen durumu, kapsam dahilindeki hizmetler, doğrulama durumu ve bekleyen kullanıcı arayüzü çalışmaları, devre bitene kadar bellekte kalabilir. Yük testlerinin yalnızca saniye başına istekleri değil, etkin kullanıcıları da sayması gerekir.

Gecikme, kullanıcı arayüzünün bir parçası haline gelir

Bir düğme tıklaması, giriş olayı veya ızgara etkileşimi sunucuya gidip gelebilir. Hedef kitle farklı bölgelere dağıldığında kullanıcılara yakın bir yerde ev sahipliği yapın ve sohbet unsurlarından kaçının.

Ölçek genişletmenin bir plana ihtiyacı var

Birden fazla uygulama örneği için genellikle yapışkan oturumlar, SignalR arka paneli, Azure SignalR Hizmeti veya dikkatli durum tasarımı gerekir. Aksi takdirde yeniden bağlanır ve canlı devreler yanlış örneğe inebilir.

İyi uyum: kontrollü kullanıcılar

Blazor Sunucusu, kullanıcıların, gecikmenin ve barındırma kapasitesinin bilindiği, kimliği doğrulanmış araçlar, yönetici ekranları, kontrol panelleri ve dahili uygulamalar için en güçlü sunucudur.

Blazor WebAssembly

WebAssembly maliyeti ilk yüklemeye taşır

Blazor WebAssembly sunucu devrelerini kaldırır ancak maliyeti ortadan kaldırmaz. Deneyim hızlı hissedilmeden önce tarayıcının .NET çalışma zamanını, derlemeleri, yerelleştirme kaynaklarını ve uygulama varlıklarını indirmesi gerekir. Tekrarlanan ziyaretler iyi olabilir çünkü önbellekleme yardımcı olur. İlk ziyaretler bakım gerektirir.

İlk yük vergidir

Tarayıcı .NET çalışma zamanını, uygulama derlemelerini, kaynakları ve statik varlıkları indirir. Kırpma yardımcı olur. Vaktinden önce derleme, CPU'nun yoğun çalışmasını iyileştirebilir ancak genellikle indirme boyutunu artırır.

Sırlar istemcide yaşayamaz

Kullanıcının tarayıcısında bir WebAssembly uygulaması çalışır. Herhangi bir genel ön uç gibi davranın: sırları sunucuda saklayın, API'leri koruyun ve istemci kodunun incelenebileceğini varsayın.

SEO'nun işlenmiş içeriğe ihtiyacı var

Genel makaleler, ürün sayfaları ve açılış sayfaları için yalnızca WebAssembly başladıktan sonra kullanışlı hale gelen boş kabuğa güvenmeyin. Sunucu tarafı oluşturma, önceden oluşturma, statik oluşturma veya ayrı bir içerik yolu kullanın.

İyi uyum: çevrimdışı veya istemci ağırlıklı uygulamalar

WebAssembly, kullanıcılar sık sık geri döndüğünde, çevrimdışı davranışa ihtiyaç duyduğunda veya sunucu gidiş-dönüşünün daha kötü olacağı ağır istemci tarafı işleri yaptığında iyi çalışır.

Hibrit ve Web Görünümü

Hibrit, genel açılış sayfaları için değil, uygulamalar içindir

Blazor Hybrid, bir .NET ekibinin bir masaüstü veya mobil uygulama içindeki bileşenleri yeniden kullanmak istemesi durumunda kullanışlıdır. Bir Web Görünümü aracılığıyla yerel bir kabukta çalışır, böylece yerel dosyalara, cihaz API'lerine ve kurumsal dağıtıma yakın olabilir. SEO odaklı web siteleri için bir kısayol değildir.

Yerel dosyalara, cihaz API'lerine, masaüstü dağıtımına veya mobil paketlemeye erişmeniz gerektiğinde Hibrit'i kullanın.
Yalnızca web bileşenlerini yeniden kullanmak için Hibrit'i seçmeyin. Yerel kabuk güncelleme, depolama, imzalama ve destek çalışmalarını ekler.
SEO ve paylaşılabilir genel URL'ler için Hibrit genellikle yanlış yüzeydir.

Çok dilli yönlendirme

Kültüre duyarlı bağlantılar gerçek bağlantılar olmalıdır

Çok dilli bir Blazor sitesi, sayfa etkileşimli hale geldikten sonra dil gezintisini yalnızca tıklama işleyicilerinde veya JavaScript'te oluşturmamalıdır. Arama motorları ve kullanıcılar, ilk HTML'de sabit href değerleri, kanonik URL'ler ve hreflang verileri içeren gerçek bağlantı etiketlerine ihtiyaç duyar.

Eğik çizgi kültürü eğik çizgi yolu gibi elle oluşturulmuş dizeler yerine merkezi sayfa bağlantılarını ve yardımcıları kullanın.
İlk HTML oluşturma sırasında dil bağlantılarını href değerlerine sahip bağlantı etiketleri olarak işleyin.
Kurallı URL'leri, hreflang URL'lerini ve görünür dil gezinmesini senkronize halde tutun.
Önemli bağlantıları onclick işleyicilerinin, gecikmeli JavaScript'in veya yalnızca etkileşimli Blazor durumunun arkasına gizlemekten kaçının.

Karar rehberi

Kabul ettiğiniz darboğaza göre seçim yapın

Her render modu baskıyı farklı bir yere taşır. Ölçebileceğiniz, barındırabileceğiniz ve ekibe açıklayabileceğiniz baskıyı seçin.

Sunucuyu Seçin

İlk yükleme ve .NET arka uç entegrasyonu en önemli olduğunda

Sunucu belleğinin, canlı bağlantıların ve bölgesel gecikmenin kabul edilebilir işletme maliyetleri olduğu, kontrollü, kimliği doğrulanmış uygulamalar için Blazor Sunucusunu seçin.

WebAssembly'ı seçin

Müşterinin çalışması ve çevrimdışı davranışı en önemli olduğunda

Tekrarlanan ziyaretler, önbelleğe alma, çevrimdışı kullanım veya yerel CPU işi en küçük ilk yüklemeden daha önemli olduğunda WebAssembly'yi seçin.

Hibrit'i seçin

Ürün gerçekten yerel bir uygulama olduğunda

Uygulama masaüstü veya mobil cihazlara ait olduğunda ve genel web erişiminden daha fazla yerel entegrasyona ihtiyaç duyduğunda Hibrit'i seçin.

MVC veya Razor Pages'ı seçin

Site çoğunlukla belge ve formlardan oluştuğunda

Klasik ASP.NET Core MVC veya Razor Sayfaları, içerik ağırlıklı siteler, genel belgeler ve sınırlı etkileşimli formlar için genellikle daha basittir.

Referans bölümü

Bunu gerçekten oluşturduğunuzda bir sonraki adımda bunları okuyun

Bu referanslar mimari kararından sonra faydalıdır çünkü bir Blazor sayfasını üretimde güvenilir kılan parçaları kapsar: meta veriler, dil bağlantıları, barındırma ve yeniden kullanılabilir kullanıcı arayüzü.

Blazor SEO Meta Veri Bileşeni

Her sayfanın tutarlı başlık, açıklama, Açık Grafik, standart ve JSON-LD çıktısına ihtiyacı olduğunda bunu kullanın.

SEO Dostu Kültür Bağlantıları

Çok dilli yönlendirme gerçek taranabilir bağlantılara, kararlı kültür yollarına ve doğru hreflang çıktısına ihtiyaç duyduğunda bunu kullanın.

Blazor’u UpCloud’da barındırın

Bir Blazor Sunucu uygulaması küçük bir VPS, Nginx, TLS, systemd, günlükler, yedeklemeler ve tekrarlanabilir dağıtımlara ihtiyaç duyduğunda bunu kullanın.

TablerForNet

Değer, bir pazarlama sayfası yerine bir yönetici arayüzü, veri tabloları, formlar ve kontrol paneli ekranları olduğunda bunu kullanın.

Blazor

Bir sonraki uygulama ayrıntısını seçmeden önce ilgili kılavuzların tek bir yerde olmasını istiyorsanız Blazor hub'ını kullanın.

FAQ

Sıkça Sorulan Sorular

Yaygın Blazor sorularının yanıtları

Blazor Sunucusu neden MVC'den daha fazla belleğe ihtiyaç duyabilir?

MVC bir isteği tamamlayabilir ve çoğu istek durumunu serbest bırakabilir. Blazor Server, bağlı her tarayıcı sekmesi için bir devre tutar, böylece bileşen durumu ve kapsamlı hizmetler tıklamalar arasında canlı kalabilir.

Blazor Server'ı birden fazla uygulama örneğinde çalıştırabilir miyim?

Evet ama bunu bilinçli olarak planlayın. Canlı devreler ve SignalR bağlantıları, kararlı yönlendirmeye, bir arka panele veya yönetilen SignalR hizmetine ve yeniden bağlantıların doğru şekilde hayatta kalabilmesi için uygulama durumuna ihtiyaç duyar.

Blazor WebAssembly SEO dostu olabilir mi?

Evet, ancak boş bir kabuk gönderip tarayıcının beklemesini umarak değil. Herkese açık sayfaların, ilk yanıt öncesinde veya sırasında işlenmiş HTML'ye, meta verilere, kanonik bağlantılara ve yapılandırılmış verilere ihtiyacı vardır.

Çok dilli Blazor bağlantıları nasıl oluşturulmalı?

Merkezi rota tanımlarını kullanın ve her kültür için gerçek bağlantı etiketleri oluşturun. Kullanıcıların ve tarayıcıların aynı dil yapısını görebilmesi için görünür bağlantıları, standart URL'leri ve hreflang verilerini hizalı tutun.