Server-side Pagination with NextJS 13 Server Actions

Рет қаралды 9,709

8 ай бұрын

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/nextjs
- Next.js SSR: nextjs.org/docs/app/building-...
- Server Actions: nextjs.org/docs/app/api-refer...
- Create Next App: nextjs.org/docs/pages/api-ref...
- Source code: github.com/taylor-lindores-re...
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

Пікірлер: 41

@Anonym-rs6uo 4 ай бұрын

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

@benjaoliva3383 3 ай бұрын

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

@krzysztofkrawczyk4663 6 ай бұрын

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

@CaseStudyQB 8 ай бұрын

Great job! I'll check out your other videos

@taylorlindoresreeves 7 ай бұрын

Much appreciated

@samshon9285 8 ай бұрын

Great teaching style, keep em coming!

@taylorlindoresreeves 7 ай бұрын

Thank you, appreciate it

@hyuugabetinho 7 ай бұрын

Excellent, thank you brother!!

@taylorlindoresreeves 7 ай бұрын

All good, thanks a lot

@ToadyEN 6 ай бұрын

Keep up the videos mate 👍

@YuriiLebid-op1xv 4 ай бұрын

Thanks, very professional

@yuxiang4218 8 ай бұрын

Excellent!

@taylorlindoresreeves 7 ай бұрын

Thanks

@VasileMidrigan-zc5zr 7 ай бұрын

Thanks mate!

@taylorlindoresreeves 7 ай бұрын

Very welcome!

@ufuomaonecha9815 2 ай бұрын

cool.. explantion

@davidhendriksen 4 ай бұрын

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?

@ryanp787 7 ай бұрын

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 7 ай бұрын

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

@tradfluteman 7 ай бұрын

@@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 7 ай бұрын

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 7 ай бұрын

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

@JeswinJ-ey8kh 2 ай бұрын

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

@AndriusLau 7 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

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.

@kekoa392 2 ай бұрын

good news

@romanmed9035 3 ай бұрын

why without redux? it help my for pagination

@tomfer4499 6 ай бұрын

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 4 ай бұрын

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

@RayDenis 3 ай бұрын

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 7 ай бұрын

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

@taylorlindoresreeves 7 ай бұрын

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 2 ай бұрын

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

@taylorlindoresreeves 29 күн бұрын

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 29 күн бұрын

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.