Build an INFINITE SCROLL using Next.js 13 Server Actions

A detailed implementation of infinite scroll pagination using Next.js 13 server actions.
Github: github.com/rajeshdavidbabu/in...
Discord: / discord
Timecodes
0:00 - Intro
01:13 - Paginated API Details
01:24 - App Architecture
02:26 - Coding
12:34 - Outro

[@nettion]

Love this man! It’s exactly what I needed

[@mykolatheprogramer]

Good job! Thanks a lot. You help me with my blog experiments

[@maskman4821]

Thank you so much for this useful and practical tutorial 🙏

[@raj_talks_tech]

Thanks for the feedback!

[@soepal]

Cool, straight to the point

[@Specter_techF]

Thank you very much for this tutorial was very helpful

[@user-ux6wv1sz4g]

thanks you 💯

[@gyros9162]

Thank you very much! I will try to use it in my project. But there I need to sort and filter ALL items. In this tutorial beer items placed in two different components.
UPD. Passed initial served "beers" into "load-more" and got all items in one component. Also we don't need "experimental" for ServerActions in next-config anymore

[@raj_talks_tech]

I am making another video where I have filtering for entire list.
The project is already live you can check it out here gitposter.dev

[@lol51329]

thanks a lot

[@kluglischt]

great video, thanks !
On my side I did not need to separate the initial view with a distinct component to load more.
From page.tsx I pass a prop with initial data to a single child client component, which can then modify the initial data state with more data through a server action

[@raj_talks_tech]

Then you need to watch my latest video, I have used React-virtuoso to do something similar czcams.com/video/ocWc_FFc5jE/video.html

[@nutonchakma9626]

how can i add the item number in this infinite scroll

[@anirudhsinghbhadauria4034]

thanks

[@Mike37373]

hi, can you do this with Redux Toolkit?

[@user-oc6lw2rd1q]

won't it take a lot of memory if user just continues to scroll for a long time?

[@raj_talks_tech]

Yes it would. Thats why I made a new video about "virtual lists".
I would use that over this any day. This would be okay for upto a maximum of 1000 items and not more

[@anubhavnegi4230]

wanted to see the api route where you query the data for inifinite scrolling...

[@raj_talks_tech]

@@anubhavnegi4230 Just checkout the code i. the description

[@flnnx]

I came up with a similar approach and wonder if it's a good practice to use server actions for actual get request. Docs say that they are supposed to be only for mutations, so I wonder if I should just use react query or something

[@raj_talks_tech]

Yeah not a great practice. I will just use a virtualized list library like React-virtuoso and keep the data in a paginated API

[@akvirus2]

there was no need to mark the Beers component as client, but the LoadMore.
2: using the serverAction in a clientComponent makes no longer a server action. that means your sensitive data will be sent over the client http request.

[@raj_talks_tech]

Agreed the first item could have been a Server Component. 2nd point is new to me, thanks for the update !

[@hamed4451]

It was awesome, but what if use apollo client + infinite scroll?!
I handle to fetch first page on server, then pass it to client component to render and call fetchMore ... but there is some problem, for example when i want to pass query as search, there is problem on render the current data !!

[@raj_talks_tech]

Technically you only need to ensure that your server actions return the data you are asking for.
If you move away from this page to another page or url then this will not work as you need to somehow persist the old data on client-side.
If you are facing problems then I would recommend you to do it entirely using client-components!

[@hamed4451]

@@raj_talks_tech thanks for your message,
Actually i think its impossible to use server actions, because fetching data on server and client is not the same in nextjs 13, because of that i didnt use server actions, for first page and when url changed(to fetch another first page based on the search query) i fetch on server , then pass it to client component ... actually part of it should be on client component, i think the logic is ok, but result no :)

[@raj_talks_tech]

Ah yes. Its a combination of server actions, RSCs and client components. Did you take a look at the code attached ?

[@user-jf5zr2wz2z]

can all endpoint support those stuff of perpage and page?

[@raj_talks_tech]

No. Your APIs need to be paginated. Meaning you need to specifically get that information from DB.

[@sarafarokhi59]

Hi
Thanks for your wonderfull toturial
How would be the inverse infinite scroll?

[@raj_talks_tech]

That would be slightly complicated with this approach. You can check out React-Virtuoso Library

[@marosdeefuzana6054]

`src/actions / fetch-products.ts`
this file flag by `use server` but called by client side in load more.
Can i put secret code or key in this file such as database password.

[@raj_talks_tech]

Usually not a problem. If u put something secret then I would recommend adding an extra layer of protection and use
import "server-only"
package

[@user-sh1hs4vc6s]

I thought you weren't allowed to call async functions from client components?

[@raj_talks_tech]

You can call server actions from client-components.

[@user-wf5jn7di4v]

Спасибо за ссылку на исходный код )

[@aryaprima6626]

it still has bugs

[@raj_talks_tech]

Hi. Can you post your question on Discord ?