Call server action during render for table data

[opaque stone]

I'm rewriting a table component that supports column sorting (asc/desc). The original was fully server-side rendered and used a server action to fetch data. This worked okay with a mock API, but once hooked to the real one, the performance dropped, as calling the server action on every sort rerendered the page and became too slow. Caching isn’t viable due to data size and user volume.

I moved the table to a client component, which was easy, but now I’m stuck on data fetching. I created a wrapper around the table where tried passing a callback that calls a server action returning a promise, and then use-ing that promise in the component. But unfortunately I found out server actions can’t be called during render (why?).

I can’t move the fetch logic client-side because it needs access to secrets/env vars. I know I could use an API route instead, but I really dislike writing fetch logic, handling the errors, etc, and losing the simplicity of server action just being a simple function call, where it's all handled for you.

Is there any way to call a server action during render? Or a better pattern for client components getting data from the server-side data without constantly re-fetching?

[ember sigil]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[gilded bronze]

Not answering your question, but you should know that server actions are not meant for data fetching. They are syntactic sugar for mutations. Fetching should be done in server components most of the time and if you render lists or tables then the correct use of key props will ensure that only the parts of the table that actually change will be rerendered.

[opaque stone]

Yeah, I'm aware they're not but they're also extremely convinient, and they make API routes feel old and clunky. The issue with a server component, and fetching the data in that server component is that if it rerenders then it will fetch the data again, and I don't know how to prevent that. The column headings are interactable, so they have to be a client component. I could potentially make the table rows a server component but that component would need to fetch the data but it would also rerender every time the client component changes one of the props and therefore would go and fetch the data agin.

[drowsy bloom]

I also dealt with this issue and spent a few weeks in a battle with myself to start using API routes. In a recent app I built, I have a table that is in a client component with SWR fetching the data on load and revalidating when needed. It's worked great so far. If you want to keep your server actions, you could also just call the function in an API route. But like @gilded bronze , I would suggest moving it to a route instead.