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?