Store Server Components data's and udpate them dynamicly
Unanswered
DollarNavalex posted this in #help-forum
Hey guys,
I'm migrating my website to the new
I'm migrating my website to the new
app directory. Since now, I was fetching my data client-side, using axios (some request were server-side for auth but that's it) and then store this data in zustand stores. My axios calls are inside the zustands store as callable functions. Since the new Server Components allow me to fetch data directly from the server (my api is running on the same docker-compose as my next.js app), I wanted to see if is there any way to move my whole data fetching logic server-side. But my issue is I want to re-trigger a fetch if the user add/edit/remove an entry etc. Is there a way to achieve it with Server Component ? Or it's maybe pointless to think this way, and I should just do the first fetching server-side then store everyting in my zustand and call my zustand fetch functions from the front to refresh ?14 Replies
nextjs server api are designed to be stateless. youd need conenction with a db for that
you can do it with server action for server-side callable functions from client comps
and those server action can do query on db and will return the data back to the client component, allowing zustand to update the store
Hmm I see, but using server actions seems useless because i already got a backend running on express.js
So i guess my solution would be to keep the same behaviour with my zustand front-side, but adding a first fetch server-side to populate the components
And anyway i'm using mui for the whole website, on almost all my components, so I must do client-side components everywhere :/
@DollarNavalex And anyway i'm using mui for the whole website, on almost all my components, so I must do client-side components everywhere :/
yeah thats the downside of using css-in-js UI libraries
I'll try another library,
primereact seems to be complete, and i hope with a more classic css idea (i saw in the doc some pages about sass, so i guess they doesn't use css-in-js)Hm okay, it needs a context provider, so I have to put my main layout client-side, but does it force all children components of this layout to be client ? Or I can mix both without regarding the parent type ?
If it doesnt, I guess that all UI library like that disallow me to use the server components at all ?
@DollarNavalex Hm okay, it needs a context provider, so I have to put my main layout client-side, but does it force all children components of this layout to be client ? Or I can mix both without regarding the parent type ?
you can still mix children component and it wont force all chidlren to client
next.js simply slot server comps into clidren component just fine
the problem is not about the client renering stuff
but the problem is that since css-in-js modify the
style prop of an element, it might be different that what is already prerendered in the server, (sometimes causing hydration error)