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

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

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!

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

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

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

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

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

Bro Bro perfect work simple and straightforward thank you so much

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

2:54 Kinda looks like a.....😆.

Nice job Josh !

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

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.

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?

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!

Thanks for the amazing content!!! 🎉

You didnt mention how to get the data from api. Should it happen serverside? Should only initially happen server-Side and all other controls client-side? whats the best way?

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

What is your fifth left panel? I am curious.

How would you implement infinite scroll type of pagination using this server-side method?

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.

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?

loading state for navigation between pages?

Just now I wanted to search how to implement pagination to my site and this video popped up on my home page.

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?

Another absolute banger

How can I implement server-side pagination by integrating an API? Please help!

Great topic!

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.

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

hello josh when tutorial fullstack come out?

what if people manually change the params?

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

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

How comes am only getting to know this rn? Thanks mate

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

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

thnks for updating gist

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

Please do a video using plain sql with nextjs14

I think similarly we can make search functionality serverside in nextjs

what is tsx?

Thanks, very helpfull!

Next js 14 you cant put client components inside server component.

thnx my friend . it was good

YOU ARE AWESOME

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

thats cool for SSR but what about SSG

please do it with a real world database josh

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

that's amazing!

Will this also work with pages directory and getServerSideProps?

That looks like a giant... Johnson! Get on the horn to British Intelligence and let them know about this

I swear my boss loves you lmao

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.

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

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

thanks 💯

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

Cool Bro 🤘👍

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?

Use a real data fetch from db or external data source which takes more than a few milliseconds and see how pagination feels so laggy or frozen.

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

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.

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

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

we want server pagination with react table

Bold of you to assume that I can read 😅

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.

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

Bro there's nothing new here. Any old framework does this out of the box

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

didn't knew you couldn't use url params to store your pagination state in the FE 🤦‍♂. Stop saying SS components are best.... they are not 95% of the time.

dude, are u serious ?, this is not a server side pagination !!!!!!! it's a dummy pagination, imagine you have in your database millions of records ??? how u can handle this

How rude of you to assume I can read 🤣

NO THANKS

I don't mean to be negative, but given the content, this should have been youtube short at max. You can squeeze a lot more info in 5+min video