URL, Hash, and History API

Single Page App (SPA) brought a possibility to change application states from the client-side. AJAX using XMLHttpRequest object is the core technique of SPA development. SPA is cool because users can experience desktop application feeling, because SPA does not reload the entire page on each clicking on links.

However, SPA had an issue of bookmarking and Back button, because browsers could not detect state changes in the same URL. Web developer invented a workaround. Using the hash #, SPA can mark state changes, which means that bookmarking and Back button work properly.

However, another issue was raised from the perspective of Search Engine Optimization(SEO). Because the hash # are not crawlable by Search Engine, SPA turns out a bad option for marketing, although it wins user experience.

But another solution is provided. HTML5 introduced History API specification. Browsers implemented with History API (pushState) can now remember application states even when using AJAX techniques. And later, the onpopstate callback will be called to reconstruct the original page and its state without reloading a page.

It is also important to remember that the server side URL must work to serve the front-end side dynamic URL fragments, because, in this case, the front-side URLs are faking as real/true/standard URLs.

Helpful links: