statik sunucu tarafı işleme (statik SSR) ile ASP.NET Core Razor sınıf kitaplıkları (RCL)

Bu makalede, statik sunucu tarafı işleme (statik SSR) desteğini göz önünde bulunduran bileşen kitaplığı yazarları için rehberlik sağlanır.

Blazor , resmi olarak sınıf kitaplıkları (RCL) olarak adlandırılan Razor açık kaynak ve ticari bileşen kitaplıkları ekosisteminin geliştirilmesini teşvik eder. Geliştiriciler kendi şirketlerindeki uygulamalar arasında bileşenleri özel olarak paylaşmak için yeniden kullanılabilir bileşenler de oluşturabilir. İdeal olarak, bileşenler mümkün olduğunca çok barındırma modeli ve işleme moduyla uyumluluk için geliştirilmiştir. Statik SSR, etkileşimli işleme modlarından daha zor olabilecek ek kısıtlamalar sunar.

Statik SSR'nin özelliklerini ve kısıtlamalarını anlama

Statik SSR, sunucu gelen bir HTTP isteğini işlediğinde bileşenlerin çalıştığı bir moddur. Blazor , bileşeni yanıta dahil edilen HTML olarak işler. Yanıt gönderildikten sonra sunucu tarafı bileşeni ve işleyici durumu atılır, bu nedenle kalan tek şey tarayıcıda HTML'dir.

Bileşen durumunu tutmak için devam eden sunucu kaynakları gerekmediğinden, tarayıcı ile sunucu arasında sürekli bağlantı kurulmaması gerektiğinden ve tarayıcıda WebAssembly yükü gerekmediğinden, bu modun avantajı daha ucuz ve daha ölçeklenebilir bir barındırmadır.

Varsayılan olarak, tüm mevcut bileşenler statik SSR ile kullanılabilir. Ancak bu modun maliyeti, † gibi @onclickolay işleyicilerinin aşağıdaki nedenlerle çalıştırılmamasıdır:

• Tarayıcıda bunları çalıştıracak bir .NET kodu yok.
• Sunucu, olay işleyicilerini yürütmek veya aynı bileşen örneklerini yeniden oluşturmak için gereken tüm bileşen ve işleyici durumlarını hemen atmıştır.

†İleri işleme modundan @onsubmit bağımsız olarak her zaman işlevsel olan formlar için olay işleyicisi için özel bir özel durumdur.

Bu, bir devre veya Blazor WebAssembly çalışma zamanı başlatılmadan önceBlazor, bileşenlerin ön kayıt sırasında nasıl davrandığının eşdeğeridir.

Tek rolü salt okunur DOM içeriği üretmek olan bileşenler için, statik SSR için bu davranışlar tamamen yeterlidir. Ancak kitaplık yazarlarının kitaplıklarına etkileşimli bileşenler eklerken hangi yaklaşımı benimsemeleri gerektiğini düşünmeleri gerekir.

Bileşen yazarları için seçenekler

Üç ana yaklaşım vardır:

• Etkileşimli davranışlar kullanma (Temel)

  Tek rolü salt okunur DOM içeriği oluşturmak olan bileşenler için geliştiricinin özel bir işlem yapması gerekmez. Bu bileşenler doğal olarak herhangi bir işleme moduyla çalışır.

  Örnekler:

  • Bir kişiye karşılık gelen verileri yükleyen ve fotoğrafı, iş unvanını ve diğer ayrıntıları içeren stilize bir kullanıcı arabiriminde işleyen bir "kullanıcı kartı" bileşeni.
  • HTML <video> öğesinin çevresinde sarmalayıcı işlevi gören ve bir bileşende kullanımı daha kolay hale getiren bir Razor "video" bileşeni.

• Etkileşimli işleme gerektir (Temel)

  Bileşeninizin yalnızca etkileşimli işleme ile kullanılmasını zorunlu kılabilirsiniz. Bu, bileşeninizin uygulanabilirliğini sınırlar, ancak rastgele olay işleyicilerini serbestçe kullanabileceğiniz anlamına gelir. Bu durumda bile, belirli @rendermode bir bildirimi yapmaktan kaçınmanız ve kitaplığınızı kullanan uygulama yazarının bir tane seçmesine izin vermelisiniz.

  Örnekler:

  • Kullanıcıların video kesimlerini ekleyebileceği ve yeniden sıraladığı bir video düzenleme bileşeni. Bu düzenleme işlemlerini düz HTML düğmeleri ve form gönderileriyle göstermenin bir yolu olsa bile, gerçek etkileşim olmadan kullanıcı deneyimi kabul edilemez.
  • Diğer kullanıcıların etkinliklerini gerçek zamanlı olarak göstermesi gereken işbirliğine dayalı bir belge düzenleyicisi.

• Etkileşimli davranışlar kullanın, ancak statik SSR ve aşamalı geliştirme için tasarım (Gelişmiş)

  Birçok etkileşimli davranış yalnızca HTML özellikleri kullanılarak uygulanabilir. HTML ve CSS'yi iyi anladığınızda, genellikle statik SSR ile çalışan kullanışlı bir işlevsellik temeli oluşturabilirsiniz. Yine de yalnızca etkileşimli işleme modlarında çalışan daha gelişmiş, isteğe bağlı davranışlar uygulayan olay işleyicileri bildirebilirsiniz.

  Örnekler:

  • Bir kılavuz bileşeni. Statik SSR altında, bileşen yalnızca verilerin görüntülenmesini ve sayfalar arasında gezinmeyi destekleye bilir (bağlantılarla <a> uygulanır). Etkileşimli işleme ile kullanıldığında, bileşen canlı sıralama ve filtreleme ekleyebilir.
  • Bir sekme kümesi bileşeni. Bağlantılar kullanılarak <a> sekmeler arasında gezinti gerçekleştirildiğinde ve durum yalnızca URL sorgu parametrelerinde tutulduysa, bileşen olmadan @onclickçalışabilir.
  • Gelişmiş bir dosya karşıya yükleme bileşeni. Statik SSR altında, bileşen yerel <input type=file>olarak davranabilir. Etkileşimli işleme ile kullanıldığında, bileşen karşıya yükleme ilerleme durumunu da görüntüleyebilir.
  • Hisse senedi borsası. Statik SSR altında bileşen, HTML işlendiği sırada hisse senedi teklifini görüntüleyebilir. Etkileşimli işleme ile kullanıldığında bileşen hisse senedi fiyatını gerçek zamanlı olarak güncelleştirebilir.

Bu stratejilerden herhangi biri için JavaScript ile etkileşimli özellikler uygulama seçeneği de vardır.

Bu yaklaşımlar arasından seçim yapmak için, yeniden kullanılabilir Razor bileşen yazarlarının maliyet/avantajdan ödün vermesi gerekir. Bileşeniniz daha kullanışlıdır ve statik SSR de dahil olmak üzere tüm işleme modlarını destekliyorsa daha geniş bir potansiyel kullanıcı tabanına sahiptir. Ancak, her işleme modunu destekleyen ve en iyi şekilde yararlanan bir bileşeni tasarlamak ve uygulamak daha fazla iş gerektirir.

yönergesi ne zaman kullanılır?@rendermode

Çoğu durumda, yeniden kullanılabilir bileşen yazarları etkileşim gerektiğinde bile bir işleme modu belirtmemelidir. Bunun nedeni, bileşen yazarının uygulamanın ile InteractiveAuto, InteractiveWebAssemblyveya her ikisi için InteractiveServerdesteği etkinleştirip etkinleştirmediğini bilmemesidir. Bileşen yazarı, belirtmeyerek @rendermodeseçimi uygulama geliştiricisine bırakır.

Bileşen yazarı etkileşimin gerekli olduğunu düşünse bile, bir uygulama yazarının yalnızca statik SSR kullanmayı yeterli gördüğü durumlar olabilir. Örneğin, sürükleme ve yakınlaştırma etkileşimine sahip bir harita bileşeni etkileşim gerektirebilir. Ancak bazı senaryolar yalnızca statik harita görüntüsü işlemeyi ve sürükleme/yakınlaştırma özelliklerini önlemeyi çağırabilir.

Yeniden kullanılabilir bir bileşen yazarının bileşeninde yönergesini @rendermode kullanmasının tek nedeni, uygulamanın temel olarak belirli bir işleme moduna bağlı olması ve farklı bir modda kullanıldığında kesinlikle hataya neden olmasıdır. Windows veya Linux'a özgü API'leri kullanarak konak işletim sistemiyle doğrudan etkileşim kurmanın temel amacına sahip bir bileşeni düşünün. WebAssembly'de böyle bir bileşeni kullanmak mümkün olmayabilir. Öyleyse, bileşen için bildirmek @rendermode InteractiveServer mantıklıdır.

Akış işleme

Yeniden kullanılabilir Razor bileşenler, akış işleme ([StreamRendering]öznitelik API'si) için bildirmekte @attribute [StreamRendering]serbesttir. Bu, statik SSR sırasında artımlı kullanıcı arabirimi güncelleştirmelerine neden olur. Aynı veri yükleme desenleri, özniteliğin varlığından bağımsız olarak etkileşimli işleme sırasında artımlı kullanıcı arabirimi güncelleştirmeleri oluşturduğundan [StreamRendering] , bileşen her durumda doğru şekilde davranabilir. Akış statik SSR'sinin sunucuda gizlendiği durumlarda bile bileşen doğru son durumunu işlemeye devam eder.

İşleme modlarında bağlantıları kullanma

Yeniden kullanılabilir Razor bileşenler bağlantıları ve gelişmiş gezintiyi kullanabilir. HTML <a> etiketleri, etkileşimli bir bileşenle veya etkileşimli Router bir bileşen olmadan ve gelişmiş gezintinin DOM'da üst düzeyde etkinleştirilip etkinleştirilmediği/devre dışı bırakılıp bırakılmadığıyla eşdeğer davranışlar üretmelidir.

İşleme modlarında formları kullanma

Yeniden kullanılabilir Razor bileşenler, hem statik hem de etkileşimli işleme modlarında eşdeğer şekilde çalışacak şekilde uygulanaabildiği için formlar ( <form> veya <EditForm>) içerebilir.

Aşağıdaki örneği inceleyin:

<EditForm Enhance FormName="NewProduct" Model="Model" OnValidSubmit="SaveProduct">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>Name: <InputText @bind-Value="Item.Name" /></p>

    <button type="submit">Submit</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    public Product? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private async Task Save()
    {
        ...
    }
}

, FormNameve SupplyParameterFromFormAttribute API'leri Enhanceyalnızca statik SSR sırasında kullanılır ve etkileşimli işleme sırasında yoksayılır. Form hem etkileşimli hem de statik SSR sırasında düzgün çalışır.

Statik SSR'ye özgü API'lerden kaçının

Tüm işleme modlarında çalışan yeniden kullanılabilir bir bileşen yapmak için, yalnızca statik SSR sırasında kullanılabilir olduğundan bu bileşene HttpContext güvenmeyin. Etkileşimli HttpContext işleme sırasında api'nin kullanılması mantıklı değildir çünkü bu zamanlarda etkin http isteği yoktur. Durum kodu ayarlamayı veya yanıta yazmayı düşünmek anlamsızdır.

Yeniden kullanılabilir bileşenler, kullanılabilir olduğunda aşağıdaki gibi ücretsiz olarak alınabilir HttpContext :

[CascadingParameter]
public HttpContext? Context { get; set; }

Değer etkileşimli işleme sırasındadır null ve yalnızca statik SSR sırasında ayarlanır.

Çoğu durumda, kullanmaktan HttpContextdaha iyi alternatifler vardır. Geçerli URL'yi bilmeniz veya yeniden yönlendirme gerçekleştirmeniz gerekiyorsa, api'ler NavigationManager tüm işleme modlarıyla çalışır. Kullanıcının kimlik doğrulama durumunu bilmeniz gerekiyorsa, 'nin AuthenticationStateProvider hizmetini kullanarak kullanın.BlazorHttpContext.User