My New Favorite Pagination Method

-- my links

[robertomaurizzi]

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

[germandkdev]

With Offset Pagination you're only getting the same data if the data doesn't change (nothing can be added/removed in the middle of the collection). Keyset Pagination (after_id) is a easy way to at least preventing skipping a elements at the start of a page because of a change, but still can be affected by changes, just not as strongly. Cursor-based Pagination can prevent changes completely if done correctly, but can also be a bit resource-heavy

[buddy.abc]

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

[michaelzucker]

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!

[irfansaeedkhan]

i wasted to much on pagination for server side and you solved my problem in 2 mins, may you are so awesome, practical and concise

[paca]

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

[felipejzrd]

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!

[codelam]

Great video. i was suffering with convex to make it but with your video i made it finally

[artu-hnrq]

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?

[DivyJani-ycfw]

Bro Bro perfect work simple and straightforward thank you so much

[shafiqbelaroussi]

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

[poiyhqv]

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

[oleksandrploskovytskyy]

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?

[hussainbhagat]

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?

[brandonjohnson]

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.

[lucas.p.f]

You actually need zero javascript for this same problem if you just switch router navigation to <a> tags. You can do everything there with just a server component.
Mind you, when using <a> as buttons, always provide role="button" to it for accessibility purposes.

[gammon]

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?

[jorden]

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

[fersaysrelax]

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

[ValipPowa]

bro broke the 4th wall of development and noticed the punis