Can I fetch data with Server Actions in Next.js? There are different ways to fetch data. Normally Server Actions are used to mutate data, but ...

Robin Wieruch is a software engineer and author known for his tutorials, books, and courses on JavaScript, React, and GraphQL. Learners can gain practical insights into modern web development techniques, React.js best practices, and GraphQL APIs, and learn how to build full-stack applications with Robin's expertise and guidance.

Robin Wieruch

The post discusses data fetching using Server Actions in Next.js. It highlights the straightforwardness of data fetching in React Server Components but questions the effectiveness of data fetching in Client Components without Server Actions. The author describes using Route Handlers and Server Actions to fetch data, comparing both methods. Despite acknowledging that Server Actions are typically for mutations rather than queries, the author notes the improved developer experience when reusing query functions as Server Actions in Client Components.

Data Fetching with Server Actions in Next.js

I see you called out that server actions run in sequence. It often isn’t noticeable however if you were to do several server components wrapped in suspense and fetch with server actions, you would see that each item resolves one at a time. Quite confusing when one misses this important note and you expected the calls to be in parallel. Good call out

Nice write-up! Thanks for sharing.

server action is not secured. i prefer api routes with trpc

I also has this idea before but I was reluctant to do it because uts not the standard way… glad someone put it out in the open

I just started learning NextJs and I’ve used router handler only. It’s just like a custom hook that calls a API in plain React.