Using server actions for GET requests

[runoncedev]

I've a search form and a results component. The search form uses the default GET method and the results component access the search params to filter results.

Everything works great and I get to store the state of the app in the URL. But now I want to enhance it so the form submit does not reload the whole page.

I try to use Server Actions, but I notice a few things:

• It uses the POST method instead of GET.
• It breaks the form when JavaScript is not available on the client (mostly because it adds the method="POST" attribute).

I can partially overcome the first problem by using Server Actions custom invocation and get the results from the POST request. But this doesn't solve the problem that I no longer have the state in the URL, so I would need to manually implement something to store the query as a URL search param.

To fix the second problem, I can delay the rendering of the action prop of the form by using a combination of state and effect. This will avoid to have both attributes action and method="POST" on the initial HTML render.

So now it works both ways, with or without JavaScript but I do get this weird action value:

action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"

I think I could avoid this problem by simply using an API route and doing a normal client side fetch.

I have setup a CodeSandbox with the example:

https://codesandbox.io/p/sandbox/get-data-from-server-action-in-next-js-sjj637?file=/app/page.tsx:1,1

What do you think of this approach? How would you do it instead? I feel it a bit hackish to be honest.

[Panhara28]

Getting the same wired error
javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"

[itoutcome]

Did you find a fix?

[gediminastub]

Up

[seanmcquaid]

Seeing the same as well!

[Gyurmatag]

Yes, I also got POST requests, when using server actions for GET requests.

[statusunknown418]

same here, any hotfix?

[jordanpurinton]

Same here

[duhanmeric]

Same here and also:
If you navigate to page.tsx (server component) via the link tag and check the form tag from console, you will see the same error on form's action property

[YannickGir]

Got the same Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().

[guidocaru]

Having the same issue here

[IvanMGC]

the same problem

[victorhdchagas]

Same problem

[segarciat]

Hi, I'm new to Next.js and I too thought of using Server Actions for GET requests and after digging around the docs, I found this:

Behind the scenes, actions use the POST method, and only this HTTP method can invoke them.

This suggests that GET requests are not possible.

If you want to maintain the state of the app in the URL, presumably via URL Search Parameters, then you can either use the searchParams prop or the useSearchParams hook: see docs on Dynamic Functions. However, by doing this you're opting into dynamic rendering, which I believe means reloading the whole page and not what you want. It does however go on to say that by wrapping the client component that uses useSearchParams with Suspense, you are able to maintain static rendering for other components above it.

Assuming you don't maintain the state via the URL Search Params, then I think client-side fetching is what you'll need to do. Hope this helps, curious to see what you arrive at

[runoncedev]

Yes, I don't think it's possible to use GET with server actions at the moment. I'm thinking of trying with Remix, which I believe it has a more mature loader/mutation features.

[sudokid91]

Having the same issue here

[itoutcome]

Same issue

[AgusjkDev]

Still not fixed

[langheinricharchive]

up