My New Favorite Pagination Method

thnx my friend . it was good

YOU ARE AWESOME

this kinda looks like a uhmm 😂 , otheriwse nice tips like usual Josh thanx

I know this is just a demonstration but don't put every single record into a variable called data and do client side pagination controls using array.slice like that. If you have 10,000 objects in memory you're gonna have a bad time. You should plug the start and end into some sort of range statement in your query and just retrieve the number of records you want based on the limit you defined in per_page. If you're using Supabase they have a range() function on the query builder.

Well this kinda looks like a... amm anyways😆

Hey Josh, have you tried this with real data because this is exactly what I have done with the app router. All i am seeing is cached data it never fetches for new data even though I have no-cache on the fetch to an API.

Where do you get the searchParams from...is it default on every nextjs page?? i'm really confused

Dude, we 've been doing this server-side pagination since the old vanilla PHP days...

I have a similar setup where Im chaing the searchparams inside the onChange of an input. the page (server comp) is calling the function and fetching the data (I can see it logging) but the page was not "forced" to refresh/rerender like it's doing with you. what could I be missing here.

EDIT: the URL is also changing on the browser with the new serachparms

can make prev and next button pagination with MVC formet better to understand

That looks like a giant...

Johnson! Get on the horn to British Intelligence and let them know about this

But how do we do these things as well as show the pages as buttons to directly jump on whilst also calling the db depending on the number on the button?

Cool Bro 🤘👍

static data, Narnia, Pandora...ok..lol...
but, good job.

great video, however when i follow this and have two pagination controls on the page (one at the bottom and one at the top) they get out of sync due to NextJS caching features (i think). It might be worth it to mention/address this concern.

And store using cookies or something like that is a shit?

instead of using buttons yoy could use a Link and render a button if there's no next/prev page! 🎉

Thank u for this tutorial. I just needed use pagination for my current project.

Why not have the pagination controller be server side rendered as well? All the page numbers and next/previous are just regular links.

I had to use the .get on the searchParams in the PaginationControls:

const page: string = searchParams.get("page") ?? "1";
const per_page: string = searchParams.get("per_page") ?? "6";

Other than that it works fine. Thanks!

Josh, this is a very well done video. Thank you for making it! Despite some others' comments, it's a perfect solution in the appropriate context. This video demonstrates the concept of server side pagination very well and achieves the goal of walking through those concepts in a clear and understandable way. Bravo!

hi. i saw your video. thank you for helping! can i ask you something? home component has searchparams as a props. can i use this props(searchParams) other component like this video????

How rude of you to assume I can read 🤣

hello josh when tutorial fullstack come out?

Just so there is no confusion... This isn't server-side pagination, rather this the benefits of storing state in the URL. (Something which Tanner is taking to another level with Tanstack Router).

Server-side pagination is the process of cutting down the number of items sent back to the client to reduce bandwidth and increase speed. Client-side routing conversely always gets back the ENTIRE list of items from the server and then handles the pagination part in the browser/device.
A common disadvantage of server-side pagination is the fact that you need to request each page, however the smaller payload size can matter when you are dealing with 10k+ records. For client-side pagination, although the pagination part feels smooth since all the data is available locally (onces fetched), it requires the browser to fetch a bunch of data which it potentially doesn't need and have to store in RAM.

Another absolute banger

Great topic!

New? I absolutely guarantee I've been using server-side pagination for longer than you have been alive 😃

As an old backend engineer, every time I see a video or article about all these "new cool methods to solve frontend problems" that are actually decades-old plain simple server-side approaches I silently cry... 😢

Nice job Josh !

I've been storing the pagination state in the query string since the time of angularJS. This is nothing new. What's cool is not having to handle pagination via API calls to the backend

Hi,
What about changing the page manually in the url?

Hey Josh! I see you always use FC to build your components, as well I saw in Shadcn-ui a React.forwardRef is widely used.
Could you do a video about the differences from these multiple ways React allow us to define components?

Josh man it's really time to upgrade your setup and replace those monitor stands with desk mounted gasspring arms. Srs will do alot of aesthetics and space.

Somehow searchParams page props are not available if you wrap routes in a group like (dashboard)/whatever/route. Did anyone figure out a solution for it?

Thanks for this Josh, great intro for beginners to learn about pagination. Like a few others have said the bookmarks won't necessarily give you the same results all the time. I think cursor pagination is better suited for that as well for performance in the long run

I think similarly we can make search functionality serverside in nextjs

I swear my boss loves you lmao

I like this approach for how easy it seems, however, I like the UX when you click the "Next page" button and you see a loader and the button is momentarily disabled, and maybe see a cool animation when new content is added.

Also you can save the results in state so when you come back to the page it doesn't query that data again and it's just there instantly.

Stop reading if you don't want to see me vent....

I've been frustrated because the whole ecosystem is a mess right now. There are so many ways of doing things and it does not even matter if I can get an interview. A lot of dependencies or tools have not released versions that are compatible with Next 13 and there are so many UX decisions to make...

please do it with a real world database josh

How would you implement this if your paginated table is connected to a search form? Also pass everything as url param? I can imagine that the url will get out of hand pretty quickly, especially if there are complex query params like multi selects etc. How would you solve this?

Bold of you to assume that I can read 😅

You literally didn’t do what you had in the thumbnail.

everything is fine until u start considering SEO, recently been implementing pagination for a blog in my job, talked with SEO specialist and he told me it's kinda bad to have these as query params, cuz google would try to index these, ofc u can set up meta canonical tag but it's not 100% reliable, he said that the best practice would be to even have these in slug, like /blog/page/1, but when there's more params it can get messy, so yeah, not sure still what's the best practice really when it comes to pagination. I could handle everything on the client with js, but then I'm losing the ability to link to specific page and so on, I could do this with query params, but then it's bad for SEO. Wdyt?

Noice i just used it add pagination in a app i am building

This is cool for small applications, but in the real world, when you are getting the entries from a database, you should never query all the data and slice it. Instead, you should do the pagination at the database level. Great work as always!

thnks for updating gist

Will this also work with pages directory and getServerSideProps?

So the data will be fetched on demand from the database? Or you are pulling all data then pagination?