AugusteVN.Razor.PersistState 1.0.2

Persist Component State

Blazor has an unfortunate double rendering issue when pre-rendering is enabled. The PesistStateProvider.cs helps prevent double HTTP calls that occur on the component's lifecycle methods which get triggered twice.

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));
    }

    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 PeristStateProvider _stateProvider;
    public BlogHttpClient(HttpClient http, PersistentComponentState appState, PeristStateProvider 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));
    }

    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),
            () => {});
    }

    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.