Using SPA (Single page application) and browser back button

Asked

Viewed 280 times

3

Someone who works with SPA knows the best way to work with the back button of the browser?

For example, we have a list of users and the detailing of these users through a click. When we are on the "page" of detailing some user we need to, when clicking the back button of the browser, return to the list of users.

1 answer

5

There are two ways to do this:

Hash Links

It is given by the use of hash links, such as www.meusite.com#conteudo. Whereas conteudo changes every transition you want to be returnable. For example: you would have site.com#listagem and when to click it will must change to site.com#detalhamentoItem=15. This technique takes advantage of the fact that everything after the '#' is considered anchor and does not cause a page reload.

Pros

  • The pro of this method is compatibility, because it works since the 90s.
  • Works great for pages that are written purely in js (without backend).

Cons

  • "Ugly links";
  • Watching the hash change can be extremely tiring on older browsers (and ignoring them takes away your advantage). However there are dozens of libraries that do this dirty work for you. Personally, I like the http://plugins.jquery.com/hashchange/ and used it in some projects.

HTML5 history API

Newer method that allows full url control. See more in http://diveintohtml5.info/history.html

Pros

  • Perfect when your server can generate a page like site.com?detalhamento=15 or site.com/detalhamento/15, but can also serve the result via AJAX (which saves bandwidth). So you have the speed of ajax without losing the browsing by history;
  • Total control of the url that will be as beautiful as your server and your creativity allow.

Against

  • Using this method is almost impossible without a serverside language;
  • It’s Html5. Say goodbye to compatibility.
  • It is not nearly impossible to use history API without a serverside language. The hard part is managing SEO with javascript routing, regardless of the type of javascript routing used. In addition, google supports this in https://support.google.com/webmasters/answer/174992?hl=en

Browser other questions tagged

You are not signed in. Login or sign up in order to post.