Infinite Scrolling in NextJs 13 Using Server Actions

In this video, we'll implement infinite scrolling (pagination) in NextJs 13 using server actions and intersection observer.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (checkout the `infinite-scrolling` branch)
🔗 github.com/HamedBahram/next-p...
Chapters
0:00 Intro
1:06 Project code setup
2:10 Using server actions
6:26 Create an Infinite scroll client component
10:04 Add intersection observer
14:25 Work around the Router cache
17:06 Outro

[@ahrenwagner2993]

You know I was trying to think of something like this the other day. You choose really relevant and brilliant example to talk about! Definitely coming back to this haha. Thanks! Amazing stuff

[@hamedbahram]

Awesome, thank you!

[@abbaskareem5281]

This is the most useful video I have seen in awhile .. thank you very much for sharing your knowledge for these advanced,useful topics ❤

[@hamedbahram]

Glad it was helpful! Appreciate your comment.

[@zabialy2919]

It just worked... Great as always Hamed!

[@hamedbahram]

Great to hear!

[@jadealdemir3097]

Thank you million times, super good content of nextjs, very easy to understand and help me a lot

[@hamedbahram]

Happy to hear that!

[@massimo8408]

You are AMAZING, your tutorial are incredibly helpful and you explain it such a clear way. Please keep making content!

[@hamedbahram]

Thanks for the comment! I appreciate it.

[@mostafamohammadi9919]

Thank you, dear Hamed, for this incredible content.

[@hamedbahram]

You're welcome Mostafa Jan!

[@mostafamohammadi9919]

​@@hamedbahram In the official Next.js docs, they mentioned that you could only use a server action with action props on a form or formAction. However, here, neither of them was used. Could you please explain it?

[@venky_ee]

Thank you so much I was searching for this exact thing 🙏🏻

[@hamedbahram]

You got it!

[@zdargahi]

very insightful, Thanks Hamed jan

[@hamedbahram]

My pleasure! Glad it was helpful.

[@sumitsahu8657]

Thank you so much for this tutorial Hamed!

[@hamedbahram]

You're welcome, Sumit!

[@pro_coder07]

Thanks man... I was waiting for this video from a long period of time❤❤❤❤

[@hamedbahram]

You're welcome 🙂

[@JonsBeumer]

I dont leave comments often, but this deserves one. Very clean and easy implementation, well done!

[@hamedbahram]

Thank you! I appreciate that.

[@mironmakeev7846]

Your video was very useful for me, thank you.

[@hamedbahram]

My pleasure, I'm glad to hear that!

[@riyan3148]

Thank you so much, very clear explanation 🎉

[@hamedbahram]

My pleasure! Glad it was helpful.

[@mrpotatokokichi7909]

Thank you so much, everything worked perfectly!

[@hamedbahram]

Glad it helped!

[@mohaniya15]

haha i might add this next to the threads clone that i made using server actions on my channel, found this at the right time!

[@hamedbahram]

Perfect!

[@anversadutt]

very cool, thank you, keep rocking

[@hamedbahram]

Thanks!

[@chinwubachukwudi4483]

Thank you for sharing

[@hamedbahram]

Anytime! Glad to help.

[@zhiven7484]

Very nice video!! Love it! I have a question, if you call the server action in the client component(loadMoreMovies), does it execute the action code on the client? or does it call the server action in server, get the data, then send back the data to client component and set the data?

[@hamedbahram]

Thanks! The server action only runs on the server.

[@hbela1000]

Exceptional.thx.

[@hamedbahram]

Thanks!

[@memoryremains7412]

Thank you very much!

[@hamedbahram]

You are welcome!

[@hamed4451]

It was awesome, Hamde, as always. Thank you a million times! I have two questions: 1- Is it okay to use experimental features in a production app? 2- You've moved all the results (both the initial load and subsequent fetches on scroll) to the client component. Won't this impact SEO? Because on the client-side, the data isn't appended to the source, like what we currently see in React.js. Could this lead to SEO issues?

[@hamedbahram]

My pleasure! I wouldn't recommend experimental features, especially an alpha release, like server actions, for production as there may be bugs and unknown issues introduced to your application. Regarding your second question, our initial load is on the server, since both the page and the `movies` components are server components, only the subsequent fetches on scroll are happening on the client. So your inital page has data as fas as SEO is concerned.

[@hamed4451]

@@hamedbahram yes, you fetched it on server but render it on client , is it ok? is it still SSR? even you bring the render on client? I'm a little confused about it ....

[@andreasoikon]

Hey @hamedbahram, great video and nice channel! One question please. What happens if all movies are loaded and you scroll to the bottom of the page? Is there a spinner still showing or is it removed?

[@hamedbahram]

You can get the total number of movies from your db and only show the spinner when there is more to load.

[@andreasoikon]

@@hamedbahram thank you!

[@pheisar]

What are your thoughts on server actions in the documentation only being addressed as agents of mutation (its a POST request behind the scenes). There is no example in the documentation that shows a server action being used as a getter. Is using a POST request to get data bad practice?

[@hamedbahram]

That's a good question. I think it's Ok to use a POST request in this example to retrieve data. Server actions are just functions that run on the server but can also be called from the client, I think the POST implementation is to allow server mutations if needed. That said, server actions are still experimental and there are no stablished patterns on how to use them.

[@AllahomAnsorGaza]

thank you for your well expatiation's buy i have question if you i can ask

[@hamedbahram]

You're welcome! Well the movies page would have the initial data coming from the server so it won't be empty. Keep in mind that in NextJs even client components are pre-rendered on the server. You can confirm this by looking at the page source.

[@electroheadfx]

Have you the codebase start for this project, I don't find in previous video, thanks, great to get project on Next and RSC. The Next RSC is very tricky actually with cache and invalidation I can't use yet in production. Thanks great work man !

[@hamedbahram]

Hey thanks for the reminder! Just added the link in the video description. You can checkout the `search` branch for the starting point, and the `infinite-scrolling` branch for the finished version.

[@electroheadfx]

you are amazing@@hamedbahram

[@user-mn3ic2ct8d]

Cool video! But I have a question. Are there any other options besides using redirect and key crutch while searching? It seems costly to re-render the entire page instead of increasing grid render with React reconciliation.

[@hamedbahram]

Not that I know of... You could try a server action for the search where you could call the 'revalidatePath' function to refresh the route.

[@alextarasenko4228]

I also noticed one pitfall (maybe not a problem for just one filter and small page). Once you are redirecting a user on filter change (which is needed to keep filters state in the url) entire page is re requested. So maybe for search with debounce it is not noticeable, but if you have some kind of checkboxes or whatever, it will create some lag and unresponsiveness. You click the checkbox, next.js requests new page with updated params -> only after that it updates url params. So if you have filters which need to be controlled and rely on url, it may be quite tricky part.

[@alextarasenko4228]

It looks great. The only question is: will it have any negative impact on SEO, because we are using `use client`?

[@hamedbahram]

The first round of movies are server-rendered so your page has content as far as SEO is concerned.

[@Fanaro]

ShadUI Expansions now has an InfiniteScroll component.

[@hamedbahram]

I'll have to try it out.

[@mohdsahil226]

Thank you for this awesome topic!. Would you please help on how to hide spinner if there are no records?

[@hamedbahram]

My pleasure! you can disconnect the intersection observer if the result is empty, or you can get the total count of your resources from your database and figure out what your last page is.

[@mohdsahil226]

Thank you for your quick reply. I will be very thankful to you if you could please paste the code here.

[@goncaloshred]

Hey Hamed, first thanks a lot for your videos. I'm learning to code by myself and it's just really helpful to follow the docs with your help, since I'm not familiar with a lot of concepts just yet! I've been trying to implement infinite scrolling / pagination and I find that using pagination with server side rendering, everything works perfectly, even calling server actions with optimistic updates to like / save posts etc. However, I'm not having the same luck when I implement the infinite scrolling, my optimistic updates are reverted back. Would like to ask you if you could come up with a video example one day, where one would click on a button to fetch more comments and still be able to use server actions and optimistically show the like / dislike happening. Hope I'm not mixing things up!

[@hamedbahram]

Hey! Sure, can you expand on the scenario... you want to load more comments on a page while having server actions for liking/disliking comments working with Optimistic UI?

[@goncaloshred]

@@hamedbahram Yes... I was fetching comments from a server action inside useEffect and then render the new comments using useState. This worked well to fetch the comments, but when liking a comment using useOptimistic hook from React, the previous state is being reverted after the like server action. If I render the comments using a client pagination component that changes route to ?page=2 for example, then I can use searchParams to fetch the next page of comments, all of that in the server. In this case, the like comment server action using useOptimistic does update correctly. Still I was trying to not use searchParams for this, by doing data fetching in the client. The problem is that I seem to face a challenge updating the UI optimistically when calling server action to like the comment. I might be missing something...

[@goncaloshred]

@@hamedbahram from my understanding, because I'm using a client component to render more comments, I would need to invalidate the cache after a server action, so that the comments data is revalidated after that. I see some people using ReactQuery for that, but I was trying to avoid it.

[@hamedbahram]

@@goncaloshred You don't need ReactQuery, you can use server-side pagination to load more comments.

[@Parsa.izi724]

You produce incredible videos, thanks a lot, do you know if any infinite scrolls that load more data by scrolling down, and scrolling up at the same time?

[@hamedbahram]

Thank you! what do you mean by loading more when scrolling up? can you expand on that...

[@Parsa.izi724]

@hamedbahram Imagine that you searched inside the chat and this message is not in the messages, and 20 messages should be loaded from the same searched message. In this case, the user should scroll up and the messages before the searched message should be loaded, and scroll down. Next messages will be loaded,I could not find a suitable package

[@hamedbahram]

@@Parsa.izi724 I see 🤔that'll require a custom implementation for observer the scroll both ways, don't know of a libary that does that.

[@Parsa.izi724]

@hamedbahram Thanks a lot for your response 👍 you are right, I am doing the same thing ,

[@stevebendersky2056]

Thank you very much. Can you make a video about how to make infinite scroll in react table (tanstack table) using RSC / server actions?

[@hamedbahram]

Good idea! I'll have that in mind. Thanks for the suggestion

[@dmitriyvelichko712]

Can you please tell If I want to use some async operations inside my ItemCard (movies in your case). Will it be possible to do it If we use infinite scroll and render our items inside 'use client' component And will increse it the size of your build?

[@hamedbahram]

You can pass server components as children to client component with no problem. You can also have the card items be client components, which is how we'd do it in previous versions of NextJs.

[@academai11]

Great video, how do you use async loadMoreMovies in the infinite-scroll-movies client component? Im on nextjs14 and its giving me error: Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server. Any tips how to solve it? Thanks )

[@hamedbahram]

I'm using severe actions for that. You can call server actions from both client and server components. Look at my code.

[@academai11]

​@@hamedbahram nevermind, i had an async in my card component for no reason, it works just fine. thanks bro)

[@hamedbahram]

@@academai11 Glad to hear that!

[@ahmadkam5066]

I want to use infinite scrolling for list of customers which customer items in table are editable and can be removed. My result was as below: In first page when I edit customer, it will be edited in list but this not working on next pages. I mean updating customer in next pages of customers is not updating list data, but it id updating customer data in my database. can you help me to do this? Thank you

[@hamedbahram]

I'm not sure if I understand the question or the problem correctly. But generally speaking, I think you should fetch customer data client side and use mutation to update any customer and refetch data. This can be done by libraries like SWR.

[@hafeezullah9706]

1. If I don`t want to use "use server", what is the alternate for this? 2. on category page i call two APIs getCategory and fetchMovies is it ok to call multiple APIs in sever component using async, await. 3. can I use suspense (skelton) around infiniteScrollMovies Component. 4. Can I call separate sever component in side page and call separate API inside it and do scrolling thing there?

[@hamedbahram]

1. Server actions are marked with `use server` and there is no other way. 2. Yes you can call multiple APIs in server components. 3. Not sure why, but you can wrap any async component in Suspense. 4. Yes you can nest server components and have each one call APIs individually.

[@hafeezullah9706]

Point 2. Will it not increase any load time to call multiple APIs in servers component? I am new in nextjs

[@user-sh1hs4vc6s]

Is this not working anymore? It does not look like async functions are allowed to be called in client components. I get an error suggesting this: Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

[@hamedbahram]

Your page component needs to be a server component, async functions were never allowed in client components. Use my code as a reference (link is in the video description)

[@teujorge]

Can we get this working with scroll restoration? If the user goes to a new route and then back, they should come back to the same spot they where... Trying to implement this in my app with no luck so far...

[@hamedbahram]

That's a good point. I'll work on an updated video.

[@teujorge]

@@hamedbahram I tried implementing such behavior with the tanstack useInfiniteQuery hook (which seems to support server components but not server actions) but it works only for me some of the time

[@pluto3zw]

Where can I find these previous videos parts of the pagination?

[@hamedbahram]

Go to my channel videos and search for pagination. Here is one of them --> kzbin.info/www/bejne/i3-oiZV9f6iHrZo

[@mattsmith5856]

If you click on a movie and then navigate back to the search results, does the infinite scroll list reset? I'm trying to resolve this problem in a current project.

[@hamedbahram]

We don't have the individual movie pages in this example. It depends on your implementation, you can have it in a way that restores the state on the `/movies` page when navigating back.

[@cristhianguay]

@@hamedbahram How would you recommend doing it? I'm facing the same problem, but couldn't find good working examples.

[@hamedbahram]

@@cristhianguay one way can be using intercepting routes. see here → kzbin.info/www/bejne/iHzWq4aoqbykoKM

[@yagelProject]

Hi. Can you please tell me how to make infinite load with a regular array, without mongodb? You could make a separate branch in github without mongodb but with regular data array.

[@hamedbahram]

It will be exactly the same just remove the data fetching logic and hard code an array of movies.

[@demamdq2346]

How can i get the infinite scrolling without using server actions? I can use the observer package, but instead of server actions, i have a express API .. Can i use some of your logic but just fetch my endpoints to get the information... ?! I am just starting with next, anyway great tutorial!!!!

[@hamedbahram]

Yes you can use the intersection observer and call your api anytime the user scrolls down.

[@demamdq2346]

@@hamedbahram you replied the comments haha thanks for the help, already subscribed!! Awesome stuff!

[@hamedbahram]

@@demamdq2346 My pleasure! welcome to the channel!

[@pluto3zw]

I am not getting what happened in the lib folder am really stuck, I need that. 🙏

[@pluto3zw]

hahaha just found it.

[@hamedbahram]

Glad you were able to figure it out!

[@edmondbounasr8727]

your repo is missing env.example and seeding the database with movies !

[@hamedbahram]

All you need in is `MONGODB_URI` in your env. And the sample data is from Mongodb Atlas, see this video → kzbin.info/www/bejne/o4DZiGafncp5Z5Y

[@edmondbounasr8727]

@@hamedbahram i guess i missed the data related video thank you hamed. I want to ask u few questions related to nextjs how we can connect?

[@hamedbahram]

@@edmondbounasr8727 No worries! Go on my site, you can book time with me there → www.hamedbahram.io/

[@pro_coder07]

Can you please make a video on google AdSense implementation without losing SSR? PLEASE🙏

[@hamedbahram]

Interesting 🤔 I'll have that in mind for future videos.

[@pro_coder07]

@@hamedbahram thanks a lot... I will wait for that ❤❤❤

[@rampaikra3886]

next auth credentials and password recovery...?

[@hamedbahram]

Stay tuned

[@Fanaro]

The code is a bit too small.

[@hamedbahram]

will have that in mind for future videos

[@mdsll4vr]

Useful video, thanks. Why not use `search` as a key for that ul element though, instead of Math.random()?

[@hamedbahram]

Any unique key will do.