AugusteVN.Razor.PersistState 1.1.3

Persist Component State

Blazor renders components twice when prerendering is enabled. PersistStateProvider prevents duplicate fetches by restoring JSON state during the interactive render. It also replaces subscriptions for repeated keys, logs persistence failures, and keeps those failures from breaking the circuit.

Usage Example

Inheritance

public class BlogHttpClient : PersistStateProvider
{
    private readonly HttpClient _http;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState) : base(appState)
    {
        _http = http;
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await FetchAsync<BlogPostResponse?>(
            key: $"{nameof(GetBlogPostForSlug)}/{request.Slug}",
            fetchMethod: () => GetBlogPostForSlug(request),
            reFetchFromMethod: false);
    }

    private async Task<BlogPostResponse?> GetBlogPostForSlug(GetBlogPostForSlugRequest request)
    {
        try
        {
            return await _http.GetFromJsonAsync<BlogPostResponse>($"{ApiRoutes.BlogPosts}/{request.Slug}");
        }
        catch (Exception e)
        {
            _logger.LogWarning("Could not get blog post with slug: {slug}, {@errorMessage}", request.Slug, e.Message);
            return null;
        }
    }
    
}

Composition

builder.Services.AddSingleton<PersistStateProvider>();

public class BlogHttpClient
{
    private readonly HttpClient _http;
    private readonly PersistentComponentState _appState;
    private readonly PersistStateProvider _stateProvider;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState, PersistStateProvider stateProvider)
    {
        _http = http;
        _appState = appState;
        _stateProvider = stateProvider.Create(appState);
    }
    
    public async Task<BlogPostResponse?> FetchSelectedBlogPost(GetBlogPostForSlugRequest request)
    {
        return await _stateProvider.FetchAsync<BlogPostResponse?>(
            key: $"{nameof(GetBlogPostForSlug)}/{request.Slug}",
            fetchMethod: () => GetBlogPostForSlug(request),
            reFetchFromMethod: false);
    }

    private async Task<BlogPostResponse?> GetBlogPostForSlug(GetBlogPostForSlugRequest request)
    {
        try
        {
            return await _http.GetFromJsonAsync<BlogPostResponse>($"{ApiRoutes.BlogPosts}/{request.Slug}");
        }
        catch (Exception e)
        {
            _logger.LogWarning("Could not get blog post with slug: {slug}, {@errorMessage}", request.Slug, e.Message);
            return null;
        }
    }
}

Blazor Component

ExampleComponent.razor

@implements IDisposable
@inject PersistStateProvider PersistState
@inject PersistentComponentState AppState

<p>Count: @Counter</p>

@code {
    private int Counter { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var persistState = PersistState.Create(AppState);
        
        persistState.FetchAsync<int>(
            key: nameof(Counter),
            fetchMethod: () => {},
            reFetchFromMethod: false);
    }

    public void Dispose()
    {
        PersistState.Dispose();
    }
}

To see it in action, watch: Prevent this Blazor Prerendering ISSUE C# .NET 8.

Brought to you by: kiss-code.com.