Anyone have worked with pagination in app directory?
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
I try to build blog that has list of post, i want to add pagination for the list of post but
I'm quite confuse with the how i implement it (almost no youtube tutorial that discuss about this especially for app router, aside from video in hindi language).
What I've researched (react) is most of them actually uses react hooks so i guess my list of post will became client side rendering? Is that correct?
If that correct, does that have some effect on SEO?
Any references is very hepful
I'm quite confuse with the how i implement it (almost no youtube tutorial that discuss about this especially for app router, aside from video in hindi language).
What I've researched (react) is most of them actually uses react hooks so i guess my list of post will became client side rendering? Is that correct?
If that correct, does that have some effect on SEO?
Any references is very hepful
19 Replies
@Giant panda I try to build blog that has list of post, i want to add pagination for the list of post but
I'm quite confuse with the how i implement it (almost no youtube tutorial that discuss about this especially for app router, aside from video in hindi language).
What I've researched (react) is most of them actually uses react hooks so i guess my list of post will became client side rendering? Is that correct?
If that correct, does that have some effect on SEO?
Any references is very hepful
Use search params if you dont want to use client components
Giant pandaOP
@joulev but i think it will became full refresh right? Even though i use link button?
@Giant panda <@484037068239142956> but i think it will became full refresh right? Even though i use link button?
router.push(/search?q=hello) for example
Or use Link if you have buttons/links
Giant pandaOP
Yeah2 i already implement for search and tagsearch
It wont be a full page refresh
It simply reruns the server component with new searchParams
Giant pandaOP
So use Link components for the page number right?
Sorry2
<Link href=/?page=2>Next</Link> works yes
Sorry about formatting, im on mobile
Giant pandaOP
I think i forget to add more context.
So basically i want to make pagination for the list of the post.
So basically i want to make pagination for the list of the post.
@joulev <Link href=/?page=2>Next</Link> works yes
Giant pandaOP
That's fine
Basically you can treat searchParams as another parameter to your server component and use it for pagination
Giant pandaOP
I just add the context in the main question
@joulev Basically you can treat searchParams as another parameter to your server component and use it for pagination
Giant pandaOP
I'm quite skeptical won't it make the page practically do full refresh? although yes it is already rendered in the server due to server components and link components is almost instantaneous.
But i will try this, seems more feasible for me, thanks for the advise.
Any advise for client side rendering one? I try to use tanstack.
But i will try this, seems more feasible for me, thanks for the advise.
Any advise for client side rendering one? I try to use tanstack.
@Giant panda I'm quite skeptical won't it make the page practically do full refresh? although yes it is already rendered in the server due to server components and link components is almost instantaneous.
But i will try this, seems more feasible for me, thanks for the advise.
Any advise for client side rendering one? I try to use tanstack.
If you use client side rendering then just use any pagination tutorial you found, they should work fine
Tanstack also works yes
Giant pandaOP
Thank you very much 😊