I'm going crazy trying to persist data over the pre-rendering phase using PersistentComponentState.

[GlacierFox]

I've got a bit of data in a root level cascading value which I've cascaded down into a component which needs to be retained over the pre-rendering phase. I's just a simple string which is generated inside my App.razor which is cascaded down for general use.

Anyway, I've scrapped that because I couldn't get it to carry over the pre-rendering phase in any component which consumed it. After adding a breakpoint, everything is all fine on the initial cycle through OnInitialized() but I couldn't get the data to cache and restore on the second run through so it would just null out and disappear.

I thought I'd go and try and get a minimal component working to see if I'm going insane by literally lifting example code from the Prerender ASP.NET Core Razor components page on the documentation site.

I can't even get that to work. 😵‍💫

I've lifted this section of code which is supposed to simply demonstrate carrying a value over past the pre-render stage so I've put it as a new page on the side bar in a new Blazor Web App project along with the existing counter and weather pages.

...
<FluentNavLink Href="prerendered-counter-2" Icon="@(new Icons.Regular.Size20.BookDatabase())" IconColor="Color.Accent">
                Pre-Rendered Counter</FluentNavLink>
...

(I'm using the Fluent Blazor components by the way)

@page "/prerendered-counter-2"
@implements IDisposable
@inject ILogger<PrerenderedCounter2> Logger
@inject PersistentComponentState ApplicationState

<PageTitle>Prerendered Counter 2</PageTitle>

<h1>Prerendered Counter 2</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override void OnInitialized()
    {
        persistingSubscription =
            ApplicationState.RegisterOnPersisting(PersistCount);

        if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }
    }

    private Task PersistCount()
    {
        ApplicationState.PersistAsJson(nameof(currentCount), currentCount);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose() => persistingSubscription.Dispose();

    private void IncrementCount()
    {
        currentCount++;
    }
}

I'm supposed to get two identical results at the bottom - but I only get one.

info: Blazor_Data_Platform.Components.Pages.PrerenderedCounter2[0]
      currentCount set to 29

There's a note on the page which says :

If the app adopts interactive routing and the page is reached via an internal navigation, prerendering doesn't occur. Therefore, you must perform a full page reload for the PrerenderedCounter2 component to see the following output.

info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount restored to 96

Okay so this component is navigated to from my NavBar on the left and makes used of interactive routing (I think) so there's no pre-rendering and OnInitialized() is only cycled through once, which is correct because I've checked with a breakpoint. The value will only change if I reload - which it does. Of course this entire code segment serves no purpose if the page doesn't re-render. 🤔

The thing is, my actual component I'm using in my app makes use of @rendermode InteractiveServer so OnInitialized() fires twice ('ve checked with a breakpoint), even when navigating to it in the same way (using interactive navigation?) from the NavBar on the left.

So I've added @rendermode InteractiveServer to the above code and I'm getting the same problem I'm having in my main project. After putting a break point inside OnInitialized() , the initial data is loading in which is great and the data is being displayed on the page and the value is successfully stored inside the ApplicationState because I can see it in there.

The problem is, after resuming the execution, on the second cycle through OnInitialized(), it seems there's nothing in the ApplicationState to extract and restore. It just gives me a new random number, it doesn't actually restore the value that has been stored so I get;

info: Blazor_Data_Platform.Components.Pages.PrerenderedCounter2[0]
      currentCount set to 44

info: Blazor_Data_Platform.Components.Pages.PrerenderedCounter2[0]
      currentCount set to 50

It's going though the false side of the for-loop again even though the value is supposed to be stored in there from the previous run through OnInitialized().

if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }
    }

Am I misunderstanding something about how this is supposed to work? This bit at the bottom of the documentation page may have something to do with it but I don't think I'm fully understanding it...

Interactive routing and prerendering
Internal navigation for interactive routing doesn't involve requesting new page content from the server. Therefore, prerendering doesn't occur for internal page requests.

The PersistentComponentState service only works on the initial page load and not across enhanced page navigation events. If the app performs a full (non-enhanced) navigation to a page utilizing persistent component state, the persisted state is made available for the app to use when it becomes interactive. But if an interactive circuit has already been established and an enhanced navigation is performed to a page that renders persisted component state, that state isn't made available in the existing circuit. The PersistentComponentState service isn't aware of enhanced navigation, and there's no mechanism to deliver state updates to components that are already running.

If pre-rendering doesn't occur when (I'm assuming) I'm using interactive routing, why does it cycle through OnInitialized() twice and wipe out my data?

Update - It's not working because of enhanced navigation. I've just manually pasted the URL into my browser and everything is working fine and its keeping state if I do it this way. If I was to navigate to it using the Nav Bar I still get the same problems which I'm yet to find a solution for. I should have read this bit more carefully:

The PersistentComponentState service isn't aware of enhanced navigation, and there's no mechanism to deliver state updates to components that are already running.

[rmunson8]

Hello @GlacierFox, were you able to get this one figured out? I'm having the same issues and haven't been able to resolve it yet. Thanks.

[GlacierFox]

Hi. @rmunson8
Of course I'm not sure of the details of what you're trying to achieve but here's what I've done to resolve my issue. The second half of this comment may apply more to you if you're only struggling with persisting data between normal components.

I've basically got a small snippet of code in my App.razor which checks to see what the IP address is of the user accessing my local internal site. I need this in my MainLayout.Razor.

There's probably a better way of doing this but here's what works for me. I created a simple class to hold small bits of data I'd like to carry down to all components which I can set in my App.razor. You can alternatively use your own AppState service but I made this separate class to separate this simple persisting data from everything else.

/// <summary>
/// A temporary container for any data which needs transferring over 
/// a double rendering phase.
/// </summary>
public class SharedPersistentStorage
{
 /// <summary>
        /// The IP address for the current session
        /// </summary>
        public const string KEY_IPADDRESS = "CurrentUserIP";
        public string? CurrentUserIP { get; set; } = null!;
}

I then created a base Cascading Value in my Program.cs that's created at the very start before any components are even created like this:

builder.Services.AddCascadingValue(nameof(SharedPersistentStorage), sp =>
{
    SharedPersistentStorage sharedPersistentStorage = new SharedPersistentStorage();
    CascadingValueSource<SharedPersistentStorage> source = new CascadingValueSource<SharedPersistentStorage>(sharedPersistentStorage, isFixed: true);
    return sharedPersistentStorage;
});

To set the actual data I add this to my App.razor as a Cascading Parameter and set the CurrentUserIP.

@code {
    string? remoteIpAddress = "";

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

    [CascadingParameter(Name = nameof(SharedPersistentStorage))]
    public SharedPersistentStorage? SharedPersistentStorage { get; set; }

    protected override void OnInitialized()
    {
        if (httpContextAccessor.HttpContext is not null)
        {
            remoteIpAddress = httpContextAccessor.HttpContext.Connection.RemoteIpAddress?.MapToIPv4().ToString();
        }

        if (HttpContext != null && SharedPersistentStorage != null)
        {
            SharedPersistentStorage.CurrentUserIP = remoteIpAddress;
        }
    }
}

I can carry that down into any component. So I add this to my MainLayout.razor to have access to the data I've set in my App.razor. But I can't use this yet as it will null out over the double rendering phase.

[CascadingParameter(Name = nameof(SharedPersistentStorage))]
    public SharedPersistentStorage? SharedPersistentStorage { get; set; }

Persisting data over the pre-rendering phase.

Now, to allow me to transfer my IP data over the double rendering phase so it doesn't null out in my MainLayout.razor I need to use PersistentComponentState which literally just holds the data and then re-applies it after the page as internally rendered again. Inject it into your component razor file with @inject PersistentComponentState PersistentComponentState.
Create a PersistingComponentStateSubscription and a property for the data you want:

private string? userIP;
private PersistingComponentStateSubscription persistingSubscription;

Create a function to persist your data when the component loads:

private Task PersistData()
    {
        try
        {
            PersistentComponentState.PersistAsJson(SharedPersistentStorage.KEY_IPADDRESS, SharedPersistentStorage?.CurrentUserIP);

        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.Message);
        }

        return Task.CompletedTask;
    }

Finally, in OnInitializedAsync()

await Task.Run(() =>
        {
            if (SharedPersistentStorage?.CurrentUserIP != null)
            {
                userIP = SharedPersistentStorage.CurrentUserIP;
                persistingSubscription = PersistentComponentState.RegisterOnPersisting(PersistData);
            }
            else
            {
                try
                {
                    bool restoreSuccess = PersistentComponentState.TryTakeFromJson<string>(SharedPersistentStorage.KEY_IPADDRESS, out userIP);
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine(ex.Message);
                }
            }
        });

I can now use it in my MainLayout.razor in any way I like.

[rmunson8]

Thanks for the great reply and detail. In my case, I was able to confirm that the reason it wasn't working was due to enhanced navigation. I was able to turn this off at the link level by using the data-enhance-nav attribute as shown below. I'll have to decide long term if I want to continue down this path or keep enhanced nav and persist another way. Thanks.

<NavLink data-enhance-nav="false" class="nav-link" href="productlist">
      <span class="bi" aria-hidden="true"></span> Product List
</NavLink>

[GlacierFox]

Not a problem, fire me a message if you run into any more issues with it.