I display a list of posts in Razor Page using an embedded Blazor Server component.

Below is the index Razor Page code:

<component type="typeof(MyApp.Components.PostFeed)" render-mode="Server" />

Below is the PostFeed Blazor Component (reduced to bare minimum for simplicity):

@inject IPostRepo _repo

@foreach (var item in _items)
{
    <div>
        // Display Post Item ...
    </div>
}

@if (hasMore())
{
    <Button @onclick=fetchMore>More</Button>
}

@code {
    private IEnumerable<Post> _items = default!;
    private int _page = 1;

    protected override async void OnInitialized()
    {
        _items = await _repo.Fetch(page: _page, pageSize: 5);
    }

    private bool hasMore() => _page < 10; // I fix page count to 10 for simplicity

    private async void fetchMore()
    {
        if (hasMore())
        {
            _page += 1;
            var newItems = await _repo.Fetch(page: _page, pageSize: 5);
            _items = _items!.Concat(newItems);

            StateHasChanged();
        }
    }
}

My problem is that, let’s say I click the more button to fetch the second page, then I open a post on the second page, bringing me to that post’s razor page. Now when I click the back button on the phone or the browser to go back to the index, everything is refetched, and I only see posts from page 1 of course.

Which changes should I make to keep the index as it was when I go back to it?