SSR & useInfiniteQueries & maintaining scroll position

[json9512]

Hi,

I would like to get some advise on using infiniteQueries with SSR and maintaining scroll position on the web.

My page currently uses SSR to prefetch the data with a default limit and dehydrates it to the client.
On the client side, the fetched data is displayed as an infinite scroll. And as the user scrolls further, next page is fetched.
When the user clicks on a certain component, the scroll position is cached in local storage for later use.

The problem is when maintaining the scroll position of the page between page navigation/page refresh/browser back button.

Let's say the user scrolled to page 4, clicks on a component and navigates away/or refreshes the page.
When the user returns to the page, the SSR will run and the queryClient will prefetch the data with default limit and dehydrate it to send it to the client.
This will swap out the cache with the same query key in the client side, resulting the data to reset to page 1. Hence, the scroll position is out of sync.

Is there a way to maintain SSR (for SEO), and store the last visited page of the query?
(To provide all the data which the user last requested)
Or is this something that should be transferred via other means such as cookies, headers of some sort.

Thanks in advance for your advise. 🙏

[TkDodo]

Let's say the user scrolled to page 4, clicks on a component and navigates away/or refreshes the page.
When the user returns to the page, the SSR will run and the queryClient will prefetch the data with default limit and dehydrate it to send it to the client.
This will swap out the cache with the same query key in the client side, resulting the data to reset to page 1. Hence, the scroll position is out of sync.

You probably shouldn't SSR when you have data in the cache on the frontend already. This is not so easy to get done with nextJs, there is a lengthy discussion going on here with some workarounds:

• Add option to disable getServerSideProps on client-side navigation vercel/next.js#19611