Pagination in Server Components | NextJs 13

This video looks at server-side pagination in NextJs 13 app router by fetching a list of movies from our MongoDB database.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Project source code (Github)
🔗 github.com/HamedBahram/next-p...
Chapters
0:00 Intro
1:20 Project setup
3:30 Connecting to MongoDB
5:40 Accessing the movies collection
7:15 Implementing Pagination
9:56 Getting URL search params
12:57 Pagination buttons
16:35 Infinite scrolling
20:54 Outro

[@annusingh4694]

Awesome video! I like how you cover the overview of the code instead of typing it live. Covers more in less time. Thank you!

[@hamedbahram]

Glad you like it! Appreciate the comment.

[@churchilowino5744]

The clarity with which you present your content is next level...no pun intended lol. I have been working on an e-commerce website and your tutorials have been of great help. Thank you so much!

[@hamedbahram]

My pleasure! Glad to hear that, and appreciate your comment.

[@MeAsMeButMe]

Your teaching style is priceless! Thank you for providing such great content!

[@hamedbahram]

You're very welcome! I'm glad you think so :)

[@Frank.T2]

Love the organization of your code. Well done on this video!

[@hamedbahram]

Awesome! Thank you!

[@nikakondra5321]

You are getting the work done perfectly. Keep going! your channel has a true potential to have hundreds of thousands, even millions of subscribers. :)

[@hamedbahram]

Thanks! I appreciate that!

[@jordanrodrigues1824]

Amazing content!

[@hamedbahram]

Glad to hear that!

[@kobinaofori]

This is great!

[@hamedbahram]

Appreciate your comment!

[@mms2279]

very good, thank you

[@hamedbahram]

Welcome!

[@leonardo6974]

Muchas gracias!

[@hamedbahram]

de nada 🫡

[@mostafamohammadi9919]

The infinite scroll approach implemented by RSC was a great idea. However, the issue persists in the inability to display the loading indicator or skeleton when fetching the next page at the end of the current page. While I'm aware that we could utilize the Loading route, I believe it might not be the best fit for this pagination style. Do you have any workaround?

[@hamedbahram]

Watch the infinite scrolling video → kzbin.info/www/bejne/f3e8d5iwrtGEoqs

[@AndrewMelnychuk0seen]

Perfect, ty

[@hamedbahram]

Glad it helped!

[@ekimdev7622]

I think there is a problem with the route push to the same URL with different parameters. Normally if you go to another page in app router, loading.tsx should show a loading state, but if the query changes it does not trigger itself and u have to wait until new data is fetched right? it is okay if the response time is low but if you have to wait like 5 to 10 seconds the user experience is not good eneugh because u click on next but nothing changes like 5 seconds, am I wrong ?

[@hamedbahram]

Look at this video where I explain why you don't see the loading UI when changing routes and how to add it to search and/or pagination.

[@memoryremains7412]

Hi, thank you for a great tutorial. The one thing which is not straingforwand to me, is how collect new items while doing the infinite scroll. In the Trigger you do `router.push(`/movies?limit=${limit + 10}`)` but doesn't that mean that for each pagination iteration the fetch function must be to download more and more items at once? Like when limit becomes for example 100 or smth like that. Doesn't it breaks the pagination concept? So from my understanding there has to be the way to update both: `current` and `limit` (quantity of items to fetch by one pagination slice) and then collect that data to be able to render growing collection? Thank you.

[@hamedbahram]

That's right, as I mentioned in the video that's not very performant. I'm working on a video showing how to implement infinite scrolling. It'll come out in the following days, so stay tuned.

[@user-ny9em7sy7f]

I have implemented pagination and search, and it works perfectly. However, I'm wondering if I can enhance this code with a Sort/Filter method from NextUI for categories, prices, etc. (I have already in this function the validation code). Can I use state values (CSR) in the function call, just like I did for page, limit, and search?

[@hamedbahram]

Yes you can use the URL state for sorting and filtering in the same way we did for pagination and search.

[@yunyang6267]

I thought infinite scroll can only be implemented with API. is there going to be any performance difference if we implement it on the server?

[@hamedbahram]

You get all the benefits of fetching and rendering on the server instead of the client (browser). If you're using the App router in NextJs 13 which is built on top of React Server Components, you won't need an extra API layer to fetch data as you can just do it inside your components.

[@jobiej7416]

Thanks. But what if I want to implement google news type of pagination which use infinite scrolling?

[@hamedbahram]

Did you happen to watch the end of the video? I implemented infinite scrolling.

[@kishalayray7570]

How to achieve it for static content generation using getStaticProps? I think for that case I have to implement pagination logic in next component after query the whole document

[@hamedbahram]

In the 'pages' router, you can either paginate client-side or use 'getServerSideProps' for server rendered pages.

[@hey.............]

I was able to implement something of this sort in next.js 13 app router, but i am facing an issue wherein if i switch between pages in my app using nav component and see stale data. I am not able to fix that. It would be great if you an also cover that use case.

[@hamedbahram]

Adding a key to your page component might do the trick.

[@user-xs1nd4wl7t]

I'm currently facing difficulties in understanding the concept correctly. Initially, I had a dropdown box that I populated using a service action (SA), which in turn called an API endpoint in my route.js. The data within the dropdown doesn't change often. However, I've made changes to the SA so that it now directly queries the database using Prisma Client. Despite this, I have reservations about this approach since there is no caching in place. I'd appreciate your insights on what might be the optimal solution in this scenario.

[@hamedbahram]

I'm not sure what the dropdown is for, but generally speaking you'll use server action for updating (mutating) data on the server, not for querying! Assuming that server action is the right pattern to use, your first refactoring to query the database directly inside your server action instead of calling an API is correct. Server actions would replace your API. Now to use caching, you can wrap the function that works with your db in the 'cache' function from React, to avoid duplicating db calls.

[@user-xs1nd4wl7t]

Thanks for you clear explanation. I do have a question about caching. The dropdownbox contains countries which probably won't change. When I use fetch in combination with the api-route in Nextjs it wil automatically be cached. Everytime the api is fetched it will return from cache. When I use the cache function from React, wouldn't it be client cache instead of the server cache when using fetch? @@hamedbahram

[@mohammadsaadati8359]

is there another approach for adding search filters and do not use query parameters?

[@hamedbahram]

url is the best place if you want to search server-side, if not you can do it client-side.

[@thenoobdev]

Is this also possible when on a dynamic route? For example, your directory is movies, but can i also do this in [categories],, so only showing category x movies, while still on server components .?

[@hamedbahram]

Yes of course. It would be the same.

[@thenoobdev]

@@hamedbahram thanks for the quick response ! Got it working already hahah 😁👍🏻 great share mate, keep up the good work

[@hamedbahram]

@@thenoobdev glad you figured it out.

[@en_kratia]

What if we have several sections on the page and these sections are having "fetch" functions with different arguments. The change of "searchParams" will force to make several fetch requests on every change of "searchParams"? Thank you.

[@hamedbahram]

Ok, what about that is the question?

[@en_kratia]

@@hamedbahram question is: how to prevent revalidation of all "fetch" requests on the whole page when "searchParams" is changing and needed just in one "fetch". I already received an answer on reddit (atm it's impossible). Sorry for the bad question

[@mohdsahil226]

Hi Great tutorial. Thank you! Would you please help how remove search params when we click on any other link in the navbar. again-2 it goes to the search page even though i click on about us. Please help!!

[@hamedbahram]

Update your navbar links to disregard the query params and go the intended page such as `/about`

[@mohdsahil226]

Really Thank you for quick reply. Would you please add a sample code. I will be really thankful to you. Since search bar is a part of header it always renders and when search has a value it is going to search page useEffect(() => { // it checks if this is the first initial render if (initialRender.current) { initialRender.current = false; return; } if (!query) { router.push(referer); } else { router.push(`/search?search=${query}`); } }, [router, query,]);

[@seanharricharan7602]

Great Video! Where can I get this movies dataset to practice with?

[@hamedbahram]

Watch this video => kzbin.info/www/bejne/o4DZiGafncp5Z5Y

[@TheProfessorMA]

So can i do the same logic but using infinite scroll in SSR or ISR ?

[@hamedbahram]

Watch this for infinite scrolling → kzbin.info/www/bejne/f3e8d5iwrtGEoqs

[@TheProfessorMA]

You are a hero.

[@hamedbahram]

@@TheProfessorMA Glad it helped!

[@sohrabkhan101]

Please also create video on infinite scroll bar

[@hamedbahram]

Watch the video till the end, I actually implemented infinite scroll at the end.

[@ojal.dev.]

How can I implement server-side pagination using an API without relying on MongoDB? Please help! I'm stuck in the middle of a project.

[@hamedbahram]

Where are you fetching your data from? All databases have basic pagination built-in.

[@ojal.dev.]

​@@hamedbahram My API is like "admin.example.in/api/schemes?page=1&limit=6"

[@sanukjoseph]

😍😍

[@hamedbahram]

🤟🏼

[@ojal_sharnagat]

How to do server side pagination by just fetching the data from an external API (without using MongoDB )? Please help! I'm stuck in the middle of a project.

[@hamedbahram]

See if the external API offers any paginated endpoint or parameters you can pass.

[@ojal_sharnagat]

@@hamedbahram Yes the API has page & limit as params to pass in the url.

[@hamedbahram]

@@ojal_sharnagat well then use that to paginate.

[@ojal_sharnagat]

Sir can you please give me just a simple example that how to do it so that I can understand it better

[@ojal_sharnagat]

My API is like "admin.example.in/api/schemes?page=1&limit=6"

[@borisbarzotto5785]

[@hamedbahram]

✌🏼

[@alexdin1565]

wooow you'r a life saver Like ++ Subscribe

[@hamedbahram]

My pleasure! Glad it helped!

[@TahirShaikh-wd7fd]

I don't know why but only your videos lagging in my device 😢

[@hamedbahram]

Hmm 🤔 that's strange. What do you mean by lagging?

[@TahirShaikh-wd7fd]

@@hamedbahram I mean the video not playing properly i.e. seamlessly

[@hamedbahram]

@@TahirShaikh-wd7fd not sure why that is. maybe decrease the resolution to match that of your bandwidth.

[@KaluKarKK]

I'm struggling to implement pagination like a load more button, when I click it it'll fetch some data with old data on top from strapi cms that I'm using. I did it with @tanstack/react-query but it became client component. 😢

[@hamedbahram]

This video is fetching and pagination on server side, react-query would be useful if you're fetching data client-side.

[@abbaskareem5281]

It would be a very good idea if you can fetch the initial data server side and then client side with react-query

[@hamedbahram]

@@abbaskareem5281 Yeah I was thinking of SWR on the client-side.

[@hamzandev9482]

native fatch in nextjs is cached the data by default, isn't affected?

[@hamedbahram]

@@hamzandev9482 You can use the native fetch as well.