Next.js Discord

Discord Forum

Next.js (app router) re-triggers fetch call in SSR page after router.push in client-side action...

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
Avatar
West African CrocodileOP
I'm trying to understand an issue we're encountering in our Next.js app (app router).

We have an SSR page that first validates a JWT token by calling a verify-token endpoint. If the token is valid, we render a form (use-client directive) on this page. The form uses a client-side action to validate the user input. After successful validation, it triggers a server-side action, which communicates with an API to register the user.

The issue we're seeing is that after a successful form submission, the token validation API is called again. Since we're doing client-side navigation after the form submission with router.push, we should jump straight to the new route? I'm not sure why the current route is being re-triggered before?

The form uses formData and the action attribute, hence no onSubmit handler with state and to my understanding then there should not be any re-render on form submission.

5 Replies

Avatar
West African CrocodileOP
Image
Image
Avatar
try out event.preventDefault in the form submit part, since forms will refresh the page normally when you submit it
Avatar
West African CrocodileOP
@Arinji It's a form action not a onSubmit handler with state
Image