Single Page Website

Many popular frameworks allows you to simplify re-loading page content through use of routers.

Routers, in most cases, rely on History API. Hash is used to navigate routes, or lets say sub-pages.

Consider this simple routing:

    ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="todo" component={Todo}/>
            <Route path="timer" component={Timer}/>
            <Route path="market" component={market.Main}>
                <IndexRoute component={market.Home}/>
                <Route path="checkout" component={market.Checkout}/>
            </Route>
        </Route>
    </Router>
    ), document.getElementById('main'));

It is taken from one of my learning repos try-react.

Overall with bunch of minifiers it takes around ~200kb (~70kb gziped) of code to make it work. Now, it might be ok for SPA which will have lots of logic on a client side.

But what to do for a simple static side, which is supposed to just present you some information? You want to enhance user experience by using the same Hash. Of course without taking bloat of third party libraries.

Maybe, you even wonder: "Can i achieve it in a JS-less way?". And the answer is "Yes, you can!".

Spoiler: it is all about hacks, again :)