My New Favorite Pagination Method

Pagination is so important when it comes to displaying data in your app. This approach of server-side pagination in Next.js 13 Server Components is so cool for that. I implemented something similar on accident while building a dashboard and figured this works so well with pagination too.
Test this for yourself!: gist.github.com/joschan21/7ad...
-- my links
Discord: / discord
My GitHub: github.com/joschan21

[@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

[@joshtriedcoding]

Very interesting! Thanks for sharing

[@emee__]

Thanks

[@nomadshiba]

i also do that. you can never trust some offset number. user loads the items, then something gets deleted, user scrolls down to load more and we have duplicates that also might cause errors

[@germandkdev]

@@nomadshibaYeah the most annoying pages are some where the offset search results auto-reload every 30s or so, sometimes making results that were at the end of the page in the middle instead or just skipping some results

[@buddy.abc123]

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

[@michaelzucker772]

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!

[@irfansaeedkhan7242]

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

[@robertomaurizzi1073]

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

[@drewwellington2496]

I have, without a doubt, been doing server-side pagination for longer than Josh has been alive & the thought of this being a "new" method makes me feel sorry for anyone who only knows a lot of these buzzword frameworks.

[@rand0mtv660]

I love frontend development, but I agree with you. It seems people are re-discovering things and showing them as they are something new. I mean nothing wrong about showcasing this, but it's not something revolutionary. What's great is that these frameworks are starting to embrace the browser and server more and more and are not trying to bypass them somehow, but rather align with them more.

[@robertomaurizzi1073]

@@rand0mtv660 showing and talking about them isn't wrong: the problem is that this is a symptom that a lot of knowledge has been thrown away wholesale by the "JS world" and that can't be good. I'd expect things like this to be taught in books and courses, instead they're being "rediscovered" with great fanfare after literally wasting years using questionable approaches... my favorite is when they noticed it might be a good idea to pre-render things on the server and not use client-side JS (rehydrated or otherwise) at all unless where it's necessary... 🤦‍♂

[@joshtriedcoding]

Oh I see why it might come across that way. Be "new" I just mean I didn't know it before and find it cooler than client side pagination now. It's not that the method is new, but rather that it's my new favorite

[@robertomaurizzi1073]

@@joshtriedcoding that's completely fine! 😀but it's sad that nobody (teachers/writers/trainers) thought it would be a good idea to show you this approach and many others (like @germandkdev answer about keyset pagination for a good example of why this approach could have problems) that have literally decades of story.

[@shafiqbelaroussi1250]

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

[@oleksandrploskovytskyy1520]

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?

[@hussainbhagat8855]

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?

[@paca3107]

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

[@user-po2iy4hq7v]

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

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

[@vincentnthomas1]

Just basic ts man

[@jorden123]

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

[@gammon9281]

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?

[@Notoriousjunior374]

You should always a default query for the optional query parameters. Say you have filter, sort asc/desc columns (country, name, age for eg), if none of those parameters are present then proceed with your default parameters for them if not then use users provided query.

[@brandonjohnson7822]

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.

[@darshandhabale143]

loading state for navigation between pages?

[@ojal.dev.]

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

[@gaurav_sachdeva]

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

[@TomasJansson]

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

[@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

[@codelam]

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

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

[@XDNickXP]

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.

[@petrtcoi9398]

Great video. Thank you. But does SEO works with pagination at Client Component?

[@DivyJani-yc1fw]

Bro Bro perfect work simple and straightforward thank you so much

[@yeico80]

Thanks for the amazing content!!! 🎉

[@joshtriedcoding]

Thank you man. Means a lot.

[@codeitraw5241]

what if people manually change the params?

[@FranciscoMarcosMilhomemAbreu]

What is your fifth left panel? I am curious.

[@alexlykesas9733]

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?

[@comaecod]

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

[@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!

[@joshtriedcoding]

Hi dude, you're 100% right. That's what I meant with the skipped and selected data in the comment - after all that is the entire idea behind pagination. Appreciate you man!

[@dvlden]

Sometimes, in the real-world apps, you will also get a bigger chunk of data (like 100 entries) per request, but still only display about 10 per page. Josh, using the slice here (for the simple demo), is actually informative. We would be slicing 10 per page, until we reach all of the entries that we received, then we'd fetch additional 100 entries.

[@fersaysrelax]

@@dvlden if this db query that returns 100 is happening server side, how do you keep those around till the next request? shouldn't the server be stateless so it can scale horizontally? or is nextjs doing something I'm not aware here?

[@mahdiidrissi9712]

That is exactly what I was thinking about while watching the video.

[@dvlden]

@@fersaysrelax Well, if you reload the page, state on the frontend application is gone. Backend will serve those same 100 results. This time it could be cached Redis response instead, so no DB query. Not talking about Next.js / React per se, been using this approach on frontend for a couple of projects.

[@rockNbrain]

Nice job Josh !

[@wirapramuja007]

hello josh when tutorial fullstack come out?

[@aBradAbroad]

Another absolute banger

[@turing4991]

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

[@joshtriedcoding]

yeah its default at the page level

[@grouby3850]

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

[@joshtriedcoding]

I got you fam

[@nro337]

Great topic!

[@markwonder8168]

Will this also work with pages directory and getServerSideProps?

[@joshtriedcoding]

As long as you can get the searchParams, I think there would be nothing stopping you

[@lucas.p.f]

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.

[@joshtriedcoding]

Oh that is a very interesting thought

[@lapulapucityrider3227]

You lose spa like behavior

[@lucas.p.f]

@@lapulapucityrider3227 you mean the smooth transition? Just use a then. Still everything would be inside the RSC. I just said tag because I come from SvelteKit, so I forgot that Next.js comes with its built-in component

[@healingwithlove8614]

I think similarly we can make search functionality serverside in nextjs

[@absolute_atom]

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

[@Israel_chidera]

Thanks Josh

[@RitikRaj-we2sc]

I mean we could store the url query in the state and it still will have the same behaviour .

[@evansrobbie7335]

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

[@Sree_ShortsYT]

thnks for updating gist

[@joshtriedcoding]

oh oops right

[@tshepokhumako1403]

Please do a video using plain sql with nextjs14

[@SMITSHINGALA]

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

[@SMITSHINGALA]

in node js

[@user-xu3lj1ej8d]

Thanks, very helpfull!

[@drewwellington2496]

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

[@zivtamary]

Yup lol

[@Shubham-yc6nz]

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

[@joshtriedcoding]

Only fetch on demand, that's the idea behind pagination. Having all the data right there in the array just makes the principle much easier to understand in a video

[@Shubham-yc6nz]

@@joshtriedcoding oks thanks. Yeah Got it. 🙂

[@aguud]

YOU ARE AWESOME

[@nicolasguillenc]

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

[@buraxta_]

that's amazing!

[@leeyahav4754]

thnx my friend . it was good

[@hugo-abdou]

thats cool for SSR but what about SSG

[@yagelProject]

Cool Bro 🤘👍

[@hastingskondwani1066]

please do it with a real world database josh

[@federico.r.figueredo]

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

[@kosti2647]

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?

[@Wakkyguy]

I read the same thing. Can't think of a way that makes everyone happy.

[@spicynoodle7419]

You can pass the query params as headers

[@darshandhabale143]

thats total bs firstly, you aren't going to rank your blog list pages, even if you want to, you have your meta tags there's nothing that makes server side pagination bad for SEO,

[@gabriellsscolaro]

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

[@8koi245]

I swear my boss loves you lmao

[@joshtriedcoding]

haha cheers appreciate both of you

[@mohakbajaj4235]

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

[@pratheeshm400]

what is tsx?

[@valobhediya]

Toronto Stock Exchange

[@user-ux6wv1sz4g]

thanks 💯

[@snivels]

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

[@8koi245]

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

[@Bhanukamax]

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.

[@anwar_thoughts2738]

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

[@tokyoknight6676]

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.

[@aurelianspodarec2629]

I worked at a company like that. I told them about the issues and the senior dev got mad at me and fired. Emotional creature.

[@tokyoknight6676]

Sorry to hear that@@aurelianspodarec2629

[@wandreperes]

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

[@SeanCassiere]

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.

[@elab4d140]

we want server pagination with react table

[@joshtriedcoding]

right, for tables this should be super nice too

[@HorizonHuntxr]

Bold of you to assume that I can read 😅

[@joshtriedcoding]

aw man maybe I should have repeated it

[@Yetisnowstop]

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

[@joshtriedcoding]

the thumbnail contains an image of pagination, that's literally the topic for the entire 5:45 of the video. No idea what you mean

[@yowremco]

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.

[@joshtriedcoding]

honestly I dont really care about my setup, just wanna build cool shit

[@Peter-bg1ku]

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

[@apurba1212]

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

[@marlonjerezisla6496]

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.

[@xya6648]

How rude of you to assume I can read 🤣

[@abdellatif.x8127]

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

[@nested9301]

NO THANKS

[@filipkovac767]

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