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.