Server-side Pagination with NextJS 13 Server Actions

Welcome to this in-depth tutorial on setting up SEO-optimised, server-side rendered pagination in Next.js 13.5 using Prisma ORM as the database querying layer. If you're looking to create a listing page or e-commerce shop, this guide is tailored for you.
Pagination helps search engines understand your site structure and ensures all your pages are crawled and indexed, which is particularly important for sites with product listings. Utilising server-side rendering in Next.js for pagination guarantees that each page link is picked up by search engines, significantly improving your site's SEO.
✅ Key Takeaways:
1. How to set up server-side rendered pagination in Next.js
2. Environment variables management for type safety
3. Database setup using Prisma
4. Building a feed component and listing cards
5. Creating and implementing a pagination component
🔗 Resources:
- Prisma: www.prisma.io/...
- Next.js SSR: nextjs.org/doc...
- Server Actions: nextjs.org/doc...
- Create Next App: nextjs.org/doc...
- Source code: github.com/tay...
Don't forget to like, share, and subscribe for more in-depth tutorials! Your feedback is essential to improve these videos; please leave your comments below 🙏
#NextJS #NextJS13 #Pagination #SEO #ServerActions #ServerSideRendering #Prisma #WebDevelopment #WebDeveloper

[@gamescope2607]

Fantastic video! I really appreciate it. Thanks a lot!

[@benjaoliva3383]

This is a very good video, straight to the point and nice quality code writing 👏

[@Anonym-rs6uo]

Awesome video man, keep it up! Worked perfectly and its so much faster then my implimentation on the client side.

[@krzysztofkrawczyk4663]

Super nice and clever! Thanks and good luck with your channel :)

[@samshon9285]

Great teaching style, keep em coming!

[@taylorlindoresreeves]

Thank you, appreciate it

[@CaseStudyQB]

Great job! I'll check out your other videos

[@taylorlindoresreeves]

Much appreciated

[@hyuugabetinho]

Excellent, thank you brother!!

[@taylorlindoresreeves]

All good, thanks a lot

[@YuriiLebid-op1xv]

Thanks, very professional

[@ToadyEN]

Keep up the videos mate 👍

[@ufuomaonecha9815]

cool.. explantion

[@JeswinJ-ey8kh]

lets say you deploy this app in production will you able to crawl all the single detail pages???if yes means is this the way to make it to crawl

[@yuxiang4218]

Excellent!

[@taylorlindoresreeves]

Thanks

[@davidhendriksen]

Excellent! I see you're using Prisma. How do you typically handle the CMS part in your app? For instance, if admins wish to upload images for the e-commerce shop, would you integrate the CMS into your Next.js application, or opt for a separate backend?

[@romanmed9035]

why without redux? it help my for pagination

[@kekoa392]

good news

[@VasileMidrigan-zc5zr]

Thanks mate!

[@taylorlindoresreeves]

Very welcome!

[@AndriusLau]

So basically - /cars/honda - will be always fetched from the server without cashing the data? Is there a way to make a page using ISR to cache data and then if the user wants to select the second page, we will use a client-side fetching. For SEO purposes, it's important to get cached data only for /cars/honda

[@taylorlindoresreeves]

I think you could use react-query useQuery hook and prefetchQuery method for this.
This would allow you to set the initial data from the database in the useQuery hook, and then prefetch the rest of the pages and add them to the cache. Check out the article on Google by searching for “React Query Prefetching”

[@acidopcodes]

I think Next 13 have a custom fetch API that does this out of the box. You can use a revalidate to specify how long you want to cache for.

[@ryanp787]

Hey great video!! I just started learning server actions. Curious, why is the function to get the data marked as “use server” when this code is already in a server component by default?

[@taylorlindoresreeves]

You make a valid point. It doesn't need to be there, my mistake!

[@tradfluteman]

@@taylorlindoresreeves It's not actually a server action at this point, just a perfectly fine server-side pagination function. That also means you don't need revalidatePath, as you are rendering and fetching data on the server whenever you route with Link.

[@tradfluteman]

An addendum to the previous comment is that you *would* need revalidation if you were using the unstable_cache() function or fetch(), to escape the aggressive caching that NextJS does behind the scenes, which can persist even across *deployments* (a real head-spinner if you're not expecting it). But since you're using third-party libraries and not caching, it's not necessary.

[@taylorlindoresreeves]

⁠​⁠@@tradflutemanthank you for the clarification. Makes perfect sense!

[@tomfer4499]

Wonderful. A shame that clicking on the page button triggers a page scroll upon revalidate. Any way to get rid of that behavior? One of the reasons why we went for a client side component instead of server side.

[@Solo_playz]

Same question, that's a very annoying behaviour of this server side pagination!

[@RayDenis]

You can link to a specific div, so if you assign an id of ‘target’ to a div, and you link to Page2#target, there won’t be any scroll assuming your target is in the same div as your pagination links.

[@regilearn2138]

can please do a video on how to do client side pagination also

[@taylorlindoresreeves]

Absolutely, I will make it my next video.

[@regilearn2138]

@@taylorlindoresreeves HI mate any update on this. appreciate if you can guide on this. pls use next.js 14 for server side and client side pagination and search function.

[@taylorlindoresreeves]

Sure thing, it’s in the works 👍

[@cidhighwind8590]

You skipped over the entire coding of the pagination component...

[@taylorlindoresreeves]

Yeah I actually just re-used a component from v0.dev as it was quicker option. I am getting a lot of feedback to say I should stop re-using and just code the damn things, so I will take this on board and hopefully improve in future vids. Thanks for the feedback.

[@megabanzaj]

thanks for tuto. No offence, hovewer some code looks overwhelmed. For example this: const currentPage = Math.min(Math.max(Number(page), 1), totalPages); Why can not you just use "page" variable instead, why you doing those calculations (I know that it's edge case handling)? Would be nice if you would explain those parts in your videos as well because it is not obvious at the first look. Now the biggest part of your video you just copy pasting some code that makes me feel that you just reusing someone else solution. It just my thoughts that maybe can improve your content :)

[@taylorlindoresreeves]

No worries. I am definitely going to spend more time in future videos explaining things a bit better (I am new to this). With regards to the copy pasting, I will try to do more coding on the fly - it just takes significantly longer so my concern is that people will get bored watching me code easy frontend stuff. Thanks for the feedback.

[@achaabni]

All the bullshit to sell Prisma to the developers