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?
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
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”
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 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.
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.
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.
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.
@@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.
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.
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 :)
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.
This is a very good video, straight to the point and nice quality code writing 👏
Awesome video man, keep it up! Worked perfectly and its so much faster then my implimentation on the client side.
Fantastic video! I really appreciate it. Thanks a lot!
Super nice and clever! Thanks and good luck with your channel :)
Great teaching style, keep em coming!
Thank you, appreciate it
Excellent, thank you brother!!
All good, thanks a lot
Thanks, very professional
Great job! I'll check out your other videos
Much appreciated
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?
Keep up the videos mate 👍
cool.. explantion
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
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
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”
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.
Excellent!
Thanks
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?
You make a valid point. It doesn't need to be there, my mistake!
@@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.
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.
@@tradflutemanthank you for the clarification. Makes perfect sense!
Thanks mate!
Very welcome!
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.
Same question, that's a very annoying behaviour of this server side pagination!
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.
why without redux? it help my for pagination
can please do a video on how to do client side pagination also
Absolutely, I will make it my next video.
@@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.
Sure thing, it’s in the works 👍
good news
You skipped over the entire coding of the pagination component...
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.
This mf just copy pasting the code with no explanations…
All the bullshit to sell Prisma to the developers
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 :)
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.