Build an INFINITE SCROLL using Next.js 13 Server Actions

[@moisen8773]

Thanks man I had to implement an infinite scroll like this for my internship. That was very helpful.

[@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

[@soepal]

Cool, straight to the point

[@nettion]

Love this man! It’s exactly what I needed

[@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 th-cam.com/video/ocWc_FFc5jE/w-d-xo.html

[@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

[@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!

[@pjgorton5908]

How are you able to use async in a client component? I always get an error when I try this in NextJS

[@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 !

[@Specter_techF]

Thank you very much for this tutorial was very helpful

[@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

[@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

[@Oxino-h4d]

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

[@nutonchakma9626]

how can i add the item number in this infinite scroll

[@ntwarioscar]

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.

[@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

[@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 ?

[@lol51329]

thanks a lot

[@anirudhsinghbhadauria4034]

thanks

[@SharpSteelSoftware]

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

[@raj_talks_tech]

You can call server actions from client-components.

[@AlirezaKhodadadi-b3c]

thanks you 💯

[@Mike37373]

hi, can you do this with Redux Toolkit?

[@АлександрКобленев-д7г]

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

[@weiwei2694-q2h]

it still has bugs

[@raj_talks_tech]

Hi. Can you post your question on Discord ?