Why I Opt Out of Next.js Server Actions for Client-Side Data Retrieval

Using server actions in Next.js to fetch client-side data may seem like a good idea, but it’s not well-documented and goes against the usual methods of fetching data. It works, but it’s not recommended by the docs. Stick to fetching data on the server or using a route handler until there’s more clarity. Keep coding and striving for progress over perfection! 👍🏽 #WebDevelopment #NextJS #ServerActions

Key Takeaways

  • Server actions in Next.js are recommended for form submissions and data mutations.
  • It is possible to fetch data with server actions, but it is not well-documented and goes against the definition of server actions in the docs.
  • Alternatives to server actions include fetching data on the server or using a route handler.
  • The use of a post method for server actions and ignoring cache control headers may not be comfortable for all developers.

Introduction

Fetching data with server actions in Next.js is a topic that has been discussed lately. While the docs recommend using server actions for form submissions and data mutations, some developers have pointed out that it is possible to fetch data with server actions. In this article, we will explore why I currently do not recommend using server actions for data fetching and some good alternatives.

Alternatives to Server Actions

There are two main alternatives to using server actions for data fetching in Next.js: fetching data on the server and using a route handler. Fetching data on the server involves getting the data on the server and passing it down to the client component. Using a route handler, on the other hand, involves requesting data from an API route or a fetcher function and then displaying it.

The Use of Server Actions for Data Fetching

While it is possible to use server actions for data fetching, it is not well-documented and goes against the definition of server actions in the docs. The use of a post method for server actions and ignoring cache control headers may not be comfortable for all developers. Therefore, it is recommended to use the alternatives mentioned above until there is more documentation on using server actions for data fetching.

How Server Actions Work

Server actions work by calling a server action function in the client component and getting the data. The server action function requests the data and returns it to the client component. The client component then displays the data.

Conclusion

In conclusion, while server actions can be used for data fetching in Next.js, it is not recommended due to the lack of documentation and the use of a post method and ignoring cache control headers. Alternatives such as fetching data on the server or using a route handler are more well-documented and recommended. As with all things in Next.js, this may change in the future, and developers should stay updated on any changes.

About the Author

Dave Gray
281K subscribers

About the Channel:

Web Development tutorials with full courses on HTML, CSS, JavaScript, React, Node.js and more!My goal is to help you learn how to build the web. Teaching helps me learn, too. I work full-time as a Solutions Architect / Developer and part-time as a university web dev instructor. Thank you for subscribing, supporting my channel and sharing the videos you think may help others.Keep striving for progress over perfection. And a little progress every day goes a very long way.Milestones:July 20, 2020 – 1st video Jan 1, 2021 – 1k subs April 2021 – 4k watch hours Nov 2021 – 10k subs Jan 21, 2022 – Video at 100k views Feb 16, 2022 – 100k watch hours Feb 19, 2022 – 1m views Dec 13, 2022 – 100k subs Dec 2022 – Over 1m views in 1 month April 7, 2023 – 10m views May 26, 2023 – 1m watch hours Sept 22, 2023 – Video at 1m views Dec 25, 2023 – 250k subs
Share the Post:
en_GBEN_GB