NextJS Learn course: Why is pagination a Client Component? -> Why use Client over Server Component?
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
Hey all, I've recently finished the NextJS App Router Learn course. However after finishing it, I had a question regarding this lesson: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination#adding-the-search-functionality
On this lesson pagination is added, where the data is loaded on the server, and pagination is handled using a Client Component so some hooks can be used. However I have a question why this needs to be a client component. Because the page above it has also access to the needed pagination information and query information. So instead of using a Client Component, we can just pass that data in as props right?
So the question around this, in a NextJS project, should I prefer Client/Server Component over the other? And why is in this course chosen for the Client Component instead of te other one? I would expect that rendering it on the server would be better for performance.
Thanks in advance
On this lesson pagination is added, where the data is loaded on the server, and pagination is handled using a Client Component so some hooks can be used. However I have a question why this needs to be a client component. Because the page above it has also access to the needed pagination information and query information. So instead of using a Client Component, we can just pass that data in as props right?
So the question around this, in a NextJS project, should I prefer Client/Server Component over the other? And why is in this course chosen for the Client Component instead of te other one? I would expect that rendering it on the server would be better for performance.
Thanks in advance
1 Reply
@Cuvier’s Dwarf Caiman Hey all, I've recently finished the NextJS App Router Learn course. However after finishing it, I had a question regarding this lesson: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination#adding-the-search-functionality
On this lesson pagination is added, where the data is loaded on the server, and pagination is handled using a Client Component so some hooks can be used. However I have a question why this needs to be a client component. Because the page above it has also access to the needed pagination information and query information. So instead of using a Client Component, we can just pass that data in as props right?
So the question around this, in a NextJS project, should I prefer Client/Server Component over the other? And why is in this course chosen for the Client Component instead of te other one? I would expect that rendering it on the server would be better for performance.
Thanks in advance
Yellowstripe scad
Server Components cannot have event listeners for Client sided interactions, such as clicking a button to change page or refetch data. Additionally, the reason the whole data isn't passed down via props is self explanatory, as you don't want massive chunks of data passed down.
Otherwise, you would just pass all the data in the client component as an array and then cycle through based on the users interactions.
Your question around which you should use, Server or Client sided components, doesn't have a straight answer, each have their own responsibilities and uses. By default, Next treats each component as a server component unless otherwise specified. This is because typically it improves performance, as there is less load on the client.
Client components, are usufull and needed because they allow you to use hooks as well as other interacivity across your application, as I previously mentioned, this also includes buttons.
Otherwise, you would just pass all the data in the client component as an array and then cycle through based on the users interactions.
Your question around which you should use, Server or Client sided components, doesn't have a straight answer, each have their own responsibilities and uses. By default, Next treats each component as a server component unless otherwise specified. This is because typically it improves performance, as there is less load on the client.
Client components, are usufull and needed because they allow you to use hooks as well as other interacivity across your application, as I previously mentioned, this also includes buttons.