Can you give an exhaustive answer to the question - how to use the history api in a spa application?

C

copal2015-12-03 13:58:37

JavaScript

copal, 2015-12-03 13:58:37

I want to start by saying that this question is not tied to angularjs or reactjs, I indicated their tags only because they are the most popular spa frameworks.
And returning to the topic, can someone give an exhaustive answer to the question - what to do with the history api so that the spa application is indexed by search engines?
What I did myself - got on github and found an isomorphic router there , which has a separate item about history-api and also an item in the config .
And my actions further are the problem, I used to work only with ready-made plugins that did everything for me. But now I decided to figure everything out, but without help I can not cope. Tell me what I need to do to see the work of this hystery on the example of two at least two links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
</head>
    <a href="page-a">this is page-a</a>
    <a href="page-b">this is page-b</a>
    <script>
        window.addEventListener('load', function(){
            console.log('load.');
            var router = new Router({
                "/page-a": function(){
                    console.log('/page-a');
                },
                "/page-b": function(){
                    console.log('/page-b')
                }
            }).configure({
                html5history: true,
//                convert_hash_in_init: true,
//                run_handler_in_init: true
            }).init();
        });
    </script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

_

_ _, 2015-12-03
@copal

You should have two handlers for the same url.
One - on the client, so that when you click on the URL on the loaded page, your application catches this click and starts the client router.
The second one is on the server, so that when the browser page is initially opened using such a link, the server returns the already generated data.
Therefore, the router is isomorphic , it, configured in the same way, can work both on the server and on the client . But it will not solve the indexing problem for you, you will have to solve it yourself. And he's just a tool.
The History API is the cornerstone in this case, because it is it that allows you to control the address bar of the page without reloading it, using regular links without #
The scheme is as follows - you click on the link, the script catches it, takes the url from the link, replaces the address in the browser address bar via the History API (the page does not reload), the History API fires an event about changing the address in the address bar, you intercept this event and feed a new one address to the router, for example, your isomorphic one.