pushState before or after updating DOM from async response?

The browser History API exposes a couple of functions, pushState and replaceState, which allow single-page apps to update the URL bar as the user navigates through the SPA. Frequently, navigation in such an application will trigger an Ajax request to retrieve data which the SPA then renders. That is, the flow (ignoring the URL update) looks something like this:

  • The user performs an action (e.g. clicking a link)
  • The app makes an Ajax request to an API server to fetch data
  • Half a second later, the response from the server is received, and the app uses it to update the DOM with some representation of the data from the response.

If we want to update the browser URL when the user clicks on this link, there are a couple of points at which we could do so:

  1. Immediately, when the user clicks the link, or
  2. When the response from the API has been received and the new screen rendered.

I have no idea what the UX implications are of updating the URL at moment 1 vs moment 2. Which should I choose, and why?

Tags: