Build an INFINITE SCROLL using Next.js 13 Server Actions

Рет қаралды 13,103

Күн бұрын

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

Пікірлер: 42

@nettion 5 ай бұрын

Love this man! It’s exactly what I needed

@mykolatheprogramer 6 ай бұрын

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

@Specter_techF 9 ай бұрын

Thank you very much for this tutorial was very helpful

@soepal 4 ай бұрын

Cool, straight to the point

@maskman4821 9 ай бұрын

Thank you so much for this useful and practical tutorial 🙏

@raj_talks_tech 9 ай бұрын

Thanks for the feedback!

@user-ux6wv1sz4g 11 ай бұрын

thanks you 💯

@lol51329 10 ай бұрын

thanks a lot

@gyros9162 7 ай бұрын

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 7 ай бұрын

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

@kluglischt 7 ай бұрын

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 7 ай бұрын

Then you need to watch my latest video, I have used React-virtuoso to do something similar kzfaq.info/get/bejne/pcmHlsJ3q8mZmnk.html

@anirudhsinghbhadauria4034 11 ай бұрын

thanks

@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

@nutonchakma9626 Ай бұрын

how can i add the item number in this infinite scroll

@flnnx 4 ай бұрын

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 4 ай бұрын

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

@Mike37373 8 ай бұрын

hi, can you do this with Redux Toolkit?

@akvirus2 4 ай бұрын

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 4 ай бұрын

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

@user-oc6lw2rd1q 3 ай бұрын

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

@raj_talks_tech 3 ай бұрын

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

@sarafarokhi59 7 ай бұрын

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

@raj_talks_tech 7 ай бұрын

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

@hamed4451 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

@@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 10 ай бұрын

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