Client side rendering AND server side rendering on the same data/page?

Question

I have an infinite scrolling gallery of items that I want to display on a page. This page also has filtering options for the items.

I was thinking that I could use SSR to fetch the first 20 items for page load, and then use CSR (probably via react-query) to fill in items as the user scrolls or updates filters.

From the docs and what I know about next, it doesn't seem to be an issue to use SSR and CSR on the same page. What I'm trying to understand is how to implement that when talking about fetching the same dataset.

I was thinking it would work something like:

• Use SSR to fetch first 20 items, store items in state
• Use CSR to fetch the next 20 items, concatenate those items with state, and overwrite state with the concatenated data
• If a filter is updated, clear state and use CSR to fetch the new data

However this feels like somewhat of a clunky implementation. Does anyone have any good examples they can point to, or any reasons why I shouldn't do this?

Answer 1

your implementation is ok but I recommend using ISRfor better performance:

1- using ISR to fetch first 20 items

2- using CSR to fetch new items on scroll

3- filter items using CSR