Server Actions were introduced in Next.js v14 as a way to write functions that are earmarked to execute either on the server or on the client. This is particularly helpful in the areas of data fetching and mutations.

The combination of RSCs and Server Actions in Next.js meant that we had a better way of thinking about data fetching. Previously, we fetched data in many different ways.

For instance, you could use the useEffect  Hook to fetch data and manage loading states. You could also do page-level data fetching with GetStaticProps and GetServerSideProps. And when you need to make database calls with sensitive credentials, you set up an API route and define your functions there.

Now, with RSCs and Server Actions, it’s much easier to make sense of things. Every component can fetch its own data and mutations can happen right within the component that does it, alleviating the need for external API routes.