Pagination not consistent on refresh of page

[jnhamid]

What is the location of your example repository?

private

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.7

What version of Remix are you using?

2.9.2

Steps to Reproduce

I followed the steps here to create a paginated product display.
Pagination Example
I followed the steps here and got a working example of the Pagination, but If I get a page of results and then refresh the page only the most recent page is shown and not any of the previous pages.

Expected Behavior

I would expect on refresh that you query for everything from the previous pages until you get to the cursor.

Actual Behavior

Only the single page of results are shown if the page is refreshed.

[blittle]

This is expected behavior. Pagination works by storing the pages inside history pushState. It's available on refresh, but if it renders synchronously, it will produce a hydration error, because the server is only rendering a single page. At the same time it needs to render synchronously to properly restore the scroll position when the user navigates to a specific product, and then clicks the back button. It's a known shortcoming, but we agreed to be a reasonable tradeoff, because most users don't refresh a list, but they do expect scroll to restore on back and forth navigation.