Help to understand how to build a structure to pass the function from the server component Page.tsx
Unanswered
Lionhead posted this in #help-forum
LionheadOP
Hello!
I'm developing a project on Next.js 14 using route-based application routing, please help me understand this:
page.tsx - a server component that receives data from the backend, this page renders a component that has a button, when I pass a function from this page.tsx for onClick, I get an error but I can't make page.tsx client-side because it has to be a server component.
I understand that I need to make page.tsx receive data from the backend, render some kind of "container component" first, and then pass props from it to the button?
Do I understand correctly or not?
But as a result, won't it turn out that in my application only pages will be server components, and almost all other components will be client-side because there are various elements that can only be used in client-side components?
I'm developing a project on Next.js 14 using route-based application routing, please help me understand this:
page.tsx - a server component that receives data from the backend, this page renders a component that has a button, when I pass a function from this page.tsx for onClick, I get an error but I can't make page.tsx client-side because it has to be a server component.
I understand that I need to make page.tsx receive data from the backend, render some kind of "container component" first, and then pass props from it to the button?
Do I understand correctly or not?
But as a result, won't it turn out that in my application only pages will be server components, and almost all other components will be client-side because there are various elements that can only be used in client-side components?
4 Replies
alert is a client method
Why not use
clearHandler directly in the button component?@(-.-) Why not use `clearHandler` directly in the button component?
LionheadOP
Because the clearButton will be present on different pages, and the clearHandler prop will be passed a different deletion function on each page. For example, on the ReviewsPage, the clearHandler prop might be passed the function "delete all reviews," while on the CatalogPage, a different function will be passed to clearHandler.
LionheadOP
clearHandler is a prop through which a function will be passed from the pages, and it will be invoked when the button is clicked.