Fetching Data Doesn't Get Better Than This

About a month ago I discovered that this data fetching pattern even works, and I'm not going back. This approach is

- type safe
- intuitive
- fast

The only downside I've discovered since is that it doesn't work for webhooks as they NEED to be an API, but other than that, god damn this is great.

-- my links

[cb]

“mutate” isn’t intuitive because it wasn’t really meant for get requests it’s meant for creating and updating data.

[BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's data fetching pattern.

[codinginflow]

My new favorite way of fetching data is with infinite loading through a server action. 10x devs use POST requests to get data.

[nobodysaysmynameright]

Hi Josh. My main problem with this approach is data consumption and download speed / execution time, which may or may not be a concern depending on where you operate. I'm currently working for a client in Zambia and Malawi which is known for their expensive data and lack of network availability, so everything counts. As a test, I made both server action and /api route return the same payload ({foo:"bar"}}, both using POST (a restriction of server actions) and there are the results:

- server actions
- 447B download size
- 84ms to respond
- /api/ route
- 192B download size
- 25ms to respond

As the request in server actions points to the route itself it's likely running much more code than the /api route which just returns some JSON.
That said 100% agree this is a much better DX with types flowing through and love to see new and creative approaches to current problems!

[kamill]

server actions are not made for fetching data, for this case better use "server only", (it is not provided by default). Basically you can achieve the same using native fetch and built in loading, suspense, error boundary. The big difference is because you use a hook, you are not more purely on server side, this require directive "use client", but your approach is much cleaner.

[wandie]

Mutations are meant to be used for creating or altering data -- i.e to mutate it., not for fetching data. Fetching data should use useQuery. POST, PATCH, PUT requests should use useMutation.

[hyperprotagonist]

Amazing! Thanks to this video I went from Apprentice Brick Layer to Senior-Seasoned Devengineer and ready for retirement.

[pizzatime]

Not sure why you're using a mutation when this looks like a query

[devinsights]

usemutation for getting data? lol, what about in memory cache?

[Gabriel-klbt]

I am still not fond of writing back-end code with Next.js. I simply do not see it becoming manageable as the project grows in size and complexity. It seems to be more suitable for a small-scale project, such blogging, with minimal logic, where using a large-scale framework, such as .NET or Spring Boot, would indeed be an overkill.

Furthermore, I followed the official tutorial from Next.js' website and there they even wrote SQL code, an approach that reminded me of when I started learning how to code with PHP, and I would write SQL, PHP, and HTML all together. It was about 10 years ago or so.

A simple CRUD, tops.

[rasmic]

Legit been doing this for time, I'm glad this got Josh's cosign ;)

[gamingwolf]

Its nice but our component will be client side, not server side and our react query is still big dependency to use in our components

[AStranger]

What do you think about react-query in combination with hono? Maybe not so simple like server actions but much more cleaner and also type-safe.

[rewix]

This looks great! However, doesn't react query provide support for typescript using generic types? I personally love extracting every useState and useMutation with fetching logic into separate hook, which take as a parameter the query options object (which also has special type provided by react query), therefore making those hooks highly reusable across many different components due to their customizability.

[xOmzi]

This is really cool Josh! Thanks for sharing ;).

[chasehelton]

Do you typically separate out your server actions into separate files or just include them all in an "actions.ts" file? I'm curious how you prefer to structure your files/folders in general, I'd love to see a video on that at some point!

[ShubhamVsCode]

Hey Josh, I definitely like this approach but the NEXT team are saying "handle form submissions and data mutations" and i have seen around the internet to not to use for as "GET" use only as Mutation function and so, What are your thoughts on this. Is it really a thing to use only as a Mutation or we can do whatever inside it without worrying about these things?

[ankursehdev]

Would you still use Mutation if the data needs to be loaded on the pageLoad? As per my understanding, mutations are generally used for CRUD operation with server and not really for data fetching.

[notammo]

Does this help with "protecting" an api key, so the user cannot just simply take it out of the network tab? If not, do you have any recommendations on how to implement client side actions like updating, deleting, etc. without exposing the token to the client?

[naksuy]

Pls someone tell me the right way to fetch data in server components. I currently fetch directly from my db on the server side but I noticed there’s no caching.