NextJS Server Actions
Anyone with experience using react query or type safe actions with nextjs? I'm looking for a bit of insight. It's been a while since I've used Next and I'm working on a project to understand it. I'm using the type safe actions lib and I'm curious about how something like a search feature would be implemented. I currently have server setup to run a server side action (not using tsa) by updating the route path with the search as a search param. The curiosity is, if I use TSA or even if I switched over to React Query, this would be a client side render, does that that defeat the point of Next being SSR?
1 Reply
Using Actions for something like a search is possible. However it's not traditional SSR since the page will not refresh - although you could do that too but then you wouldn't need Actions.
Actions are basically a way of telling the server you do this for me then return the response - in a way it's like calling fetch for your API endpoint.
Honestly, I would not use Actions for this, I would approach it like so:
- You have the Search page with the input state and w/e
- Create a new component - SearchResults which is a server component
- the component is async and does a fetch for the input then shows the results
And to answer your last question, it does not defeat the point of next being SSR. You can use it but you don't have to, and in many cases it's actually better to have client-side fetching than not. Actions can help you with that where they still generate data on the server and then stream in the components once it's done.