At least for NextJS 14 I have found some problems using server actions as fetcher, for some reason sometimes it didn't fetch data when changing the server action. Suppose that we have an object DataSource = { getRows: async (params: GetRowsParams) => await serverAction(params.filter, params.sort, params.pagination); }
Now we put it as useSWR(params, dataSource.getRows);
If I have a client component with this hook, and use it in two or more pages with different data source objects, the data could get stale and useSWR won't fetch for the new server action. It could be for several reasons, one of them could be the ID of server actions, suppose that we have two files: users.ts and schedules.ts, if both files have 4 server actions and we make an index.ts file exporting all of these server actions, it will find an error for server actions $$ACTION_1, $$ACTION_2, $$ACTION_3, $$ACTION_4, as NextJS assign these IDs for the server actions of each file, so, if the useSWR sees them in the same way, it won't detect changes on the fetcher and hence won't fetch new data. So I recommend to make the server action a regular function and put it in a route handler, then use the fetch API.