Build an INFINITE SCROLL using Next.js 13 Server Actions

Timecodes
0:00 - Intro
01:13 - Paginated API Details
01:24 - App Architecture
02:26 - Coding
12:34 - Outro

[moisen]

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

[nettion]

Love this man! It’s exactly what I needed

[mykolatheprogramer]

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

[gyros]

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

[maskman]

Thank you so much for this useful and practical tutorial 🙏

[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

[anubhavnegi]

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

[akvirus]

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.

[nutonchakma]

how can i add the item number in this infinite scroll

[Specter_techF]

Thank you very much for this tutorial was very helpful

[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

[Oxino-hd]

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

[ntwarioscar]

can all endpoint support those stuff of perpage and page?

[sarafarokhi]

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

[marosdeefuzana]

`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.

[hamed]

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

[SharpSteelSoftware]

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

[Mike]

hi, can you do this with Redux Toolkit?