How are one page app sites indexed in search engines?

Question

Search Engine Optimization

How are one page app sites indexed in search engines?
Are there any problems or preferences of search engines with this?

Answer 1

It's just that this business needs server-side rendering.
Most SPA applications are made immediately isomorphic, so dig in that direction.

Answer 2

I will supplement the answer above with explanations and examples.
The server for any page should be able to send a response both in the form of ready-made html and in the form of data to generate this html on the client, so you will need a template engine that can work both on the client and on the server.
Such a site can easily be viewed by search engines, as well as browsers with disabled javascript, and when everything is fine (js works), we got the finished page on the first request, and then we work according to the SPA principle for subsequent transitions between pages.
The second important point is that search engines look for internal pages of the site by clicking on links <a href="/page2">Page 2</a>. Accordingly, our SPA should launch its routing by intercepting clicks on links and based on the href attribute of the clicked link
The third point, you have to take care of the historyAPI for the convenience of the user.
And finally, how I implemented it all on my site
. I have a pack of templates that describe the content of pages, they work both on the server and on the client.
There is one basic template that sets the structure of the html document, it works only on the server.
At the request of a certain page, the server collects full-fledged html from templates and gives it to the browser, like this: https://d-belyaev.ru/
The browser looks for all a tags on the page and hangs a click handler on them:

function render(node) {
    var links = node.getElementsByTagName('a');
    for(let i = links.length; i--;) {
        links[i].addEventListener('click', doLinkClick);
    }
}

function doLinkClick(event) {
    var href = event.target.getAttribute('href');
    if(!href.startsWith('/')) return true;
    event.preventDefault();
    router(href);
}

The router sends an ajax request to the server at this href, appending ?json to it, to
which the server already responds differently: https://d-belyaev.ru/?json
And all this is implemented with this route on the server:

function indexRoute(request) {
    var pageData = {
        template : 'page-index',
        activeMenuIndex : 0
    };
    if(request.url.query === 'json') {
        request.json(pageData);
    } else {
        request.html(baseTemplate(pageData));
    }
}

True, in it I still do not have enough processing for 304 status (page in the browser cache), since my hands have not yet reached