DEV Community

Discussion on: Routing: I’m not smart enough for a SPA

Collapse
 
jon49 profile image
Jon Nyman •

Another hard thing about MPAs is that I haven't been able find documentation on how to build robust MPAs. That knowledge is hard to find with searches pigeon holing old web pages. So, e.g., how do you prevent a double click? If I remember right from what I've read you need to do a redirect after a form submission and somehow that stops the double click. There are other patterns like that, but where to find them?

Collapse
 
tigt profile image
Taylor Hunt •

Ah, you’ve got two concepts there — which I think reinforces your point that this knowledge isn’t easily accessible.

Redirecting after form submission avoids the “Really resubmit this data?” dialog when hitting Back after a <form method=post>, known as the Post/Redirect/Get technique.

Preventing double-clicked form submissions without JavaScript doesn’t have a single name: each framework tends to have its own (WordPress reuses WP_NONCE, for example). I like calling them “idempotency keys/tokens” after Stripe’s API popularized the term. (Stripe uses an HTTP header, but as you probably suspect it’d be <input type=hidden> for no-JS functionality, such as the django-idempotency-key module.)

Idempotency keys are a good idea even if you have JS briefly disable a submit button after the first click, because it covers network hiccups too. For example, browsers have built-in HTTP retry logic, but if the server’s response was the one that got lost along the way, the browser+network combo could cause duplicate requests.

As for where to find these techniques… I also wish I knew! I had to find them the hard way, almost exactly like you described. Heck, I only learned about idempotency keys last month.