As discussed in this question in Mauvis Ledford's answer and Pumbaa80's answer, Pushstate has many advantages in comparison to hasbangs. But I would like to discuss a single disadvantage Pushstate has, and then propose a solution. My question is whether that solution is SEO-friendly or not, and if not, what other solutions are there.
The problem with pushstate
The pushstate disadvantage relevant to me is the fact that whenever one opens a new page, a full page load must be done. With hasbangs this is not the case.
Consider this: One opens up example.com/gallery, if one just clicks a photo, Pushstate works great. One's browser makes an ajax call, fetches some JSON, renders the picture, updates the URL to example.com/photo1. Everyone is happy.
But if one right clicks a photo and opens example.com/photo1 in a new tab, a full page is requested and one does not enjoy the benefit of Pushstate. If one does the same with example.com/photo2 and example.com/photo3. And all the way up to example.com/photo10. 11 full page requests will be made.
Now consider the hashbang alternative: One opens up example.com/#gallery, now one rights click a photo and opens example.com/#!photo1 in a new tab. One does the same with example.com/#!photo2 and example.com/#!photo3. And all the way up to example.com/#!photo10. only example.com was requested, and it was cached. Then 11 tiny json requests were made. This is much better than fetching 11 full pages.
In conclusion: When visiting a website and opening many pages in multiple tabs, hashbangs are more efficient.
The solution
I found a solution which would make Pushstate as efficient as hashbangs even when opening a website's pages in multiple tabs, but I wonder how it fairs when it comes to SEO.
When a user opens example.com/gallery, this is what they get.
<html><head><meta name="fragment" content="!"></head><body>
<script src=”App.js”></script>
<script>function initialJson(){Some JSON here}</script>
</body></html>
The first line tells the web crawlers that this is an ajax page and that they should fetch a prerendered page somewhere else, please see this for more info.
The second line loads the ajax app.
The third line provides some JSON which is immediately consumed by the App.js and then the dom is generated. Thus only a single request was needed to render a full page.
Now that the user has example.com/gallery, when they decide to click something which leads to example.com/photo1, the user's browser makes an ajax call, fetches some JSON, renders the page, updates the URL. Everyone is happy.
Here's the magic: If a user decides to open example.com/photo2 in a new tab, they will get this:
<html><head><meta name="fragment" content="!"></head><body>
<script src=”App.js”></script>
<script>function initialJson(){Some JSON here}</script>
</body></html>
And since App.js is already cached, this is as good as a normal ajax request. We just let App.js consume the JSON and render a full page.
The Question
Is this SEO friendly? Are there any better alternatives? Is there a catch here? Are there any well known websites which do this?
