RSC with infinite scrolling, which is the best approach
Unanswered
Argentine ant posted this in #help-forum
Argentine antOP
Hello! Currently building out a page that handles fetching our products in a paginated way and then once a ref comes into view, it re-fetches. The current approach that we're using involves:
1) a server component fetches the info, and params such as page number are handled by a cookie. We then refresh our server component using router.refresh and it passes the data in to a client component as a prop, and the client component appends the data into the local state.
My question is, could we do this in a better way? We can't use a page number in URL as this wouldn't make sense if someone shared the URL - the offset wouldn't be personalised etc.
One other way I can think of doing this is doing the initial fetch on the server and handling subsequent fetches in the client component directly?
I'd love to hear your thoughts on this! Thanks.
1) a server component fetches the info, and params such as page number are handled by a cookie. We then refresh our server component using router.refresh and it passes the data in to a client component as a prop, and the client component appends the data into the local state.
My question is, could we do this in a better way? We can't use a page number in URL as this wouldn't make sense if someone shared the URL - the offset wouldn't be personalised etc.
One other way I can think of doing this is doing the initial fetch on the server and handling subsequent fetches in the client component directly?
I'd love to hear your thoughts on this! Thanks.
4 Replies
@Argentine ant Hello! Currently building out a page that handles fetching our products in a paginated way and then once a ref comes into view, it re-fetches. The current approach that we're using involves:
1) a server component fetches the info, and params such as page number are handled by a cookie. We then refresh our server component using router.refresh and it passes the data in to a client component as a prop, and the client component appends the data into the local state.
My question is, could we do this in a better way? We can't use a page number in URL as this wouldn't make sense if someone shared the URL - the offset wouldn't be personalised etc.
One other way I can think of doing this is doing the initial fetch on the server and handling subsequent fetches in the client component directly?
I'd love to hear your thoughts on this! Thanks.
I would do that last method that you mentioned: the first page on the server and subsequent pages in your paginated query are done on the client
@joulev I would do that last method that you mentioned: the first page on the server and subsequent pages in your paginated query are done on the client
Argentine antOP
thanks for the input - I've sort of got myself hung up after reading 'if you can use server components, then do', but to me, something like this makes sense - especially if the URL being shared would be an issue. So we get the benefits of the server doing most of the work, and when it comes to interactivity we can manage it in the client component. I suppose this would also work in the case of having params in the URL? we can fetch everything based on URL params on the first request, pass those URL params as initial state + the data, and then directly modify the state / shallow modify the URL
Yeah
Argentine antOP
sounds good thanks for your input!