How do you make website for both web crawlers and single page application users?

Question

I'm going to be very specific.

I have a frontend... http://www.eroticahub.site (not porn)

If you have javascript, it becomes... http://www.eroticahub.site/#!body=home [renders with jquery/ajax load]

If you don't have javascript, it remains... http://www.eroticahub.site/

Then you click "Privacy" at the bottom.

If you have javascript, it loads the file /body/privacy.html into the main div and you get... http://www.eroticahub.site/#!body=privacy [renders with jquery/ajax load]

If you don't have javascript, you just get... http://www.eroticahub.site/body/privacy_body.html

^ I'm just fetching the file that jquery/ajax is inserting into the template.

This isn't a very good solution. I want a page that never does a full refresh/reload but that is fully indexed by every major search engine.

Is it perhaps possible to make a command like this:

For each link in page, 
  if ( user_has_javascript )
    return page_with_javascript;
  else
    return serverside_render( page_with_javascript );

That way any user who doesn't have javascript (web crawlers included) will get a pure html/css version of the page. I'm planning on using Ruby for my backend. Does anyone have a clean solution to this problem?

Answer 1

First make everything work with regular URLs and no JavaScript. You want your JS to be unobtrusive, so build it on top of a working, plain HTML + server side solution.

Next write JavaScript that fetches the data it needs from the server and updates the document to match another of the pages.

That JavaScript should use pushState to change the URL to match the URL of the page from the server that you are generating locally with JavaScript.

NB: pushState replaces hashbang URIs. It is a standard designed for the use case you described (while hashbangs were an ugly hack).

Bind that JavaScript to your link click / form submit / etc event.

Add a listener for a popstate event so that when the user clicks Back you can restore the page to it's previous state.

Answer 2

Okay. Let's say a user goes straight to... eroticahub.site/privacy and then they click a link to go to eroticahub.site/legal The link looks like this:

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

So if the user has no javascript, they go to eroticahub.site/legal.html and request a whole new page from the server and if they do have javascript they go to eroticahub.site#legal.html and will not request a whole new page from the server.

The # will trigger a hash change event which will call a function with a big switch statement that will contain (window.location.hash === "legal.html") in it. This condition will trigger the loading of the snippets/legal.html html into the web page using jquery/ajax.

If the link goes to eroticahub.site/legal.html, the backend will deliver the same template it did for eroticahub.site/privacy.html, but with a different middle section containing words from snippets/privacy.html

If the user has javascript, the middle section is rendered the same as if the user does not have javascript. It is only when the user clicks a link that the distinction must be made whether or not they have javascript. The AJAX would have to load the dynamic content (#legal) on top of [replacing] the static content in the content div of eroticahub.site/privacy and then this would in tern be replaced by more html in the exact same div. A convention would have to be maintained such that:

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/privacy.html onclick=function(){window.location.hash = 'privacy.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/user_content/stories.html onclick=function(){window.location.hash = 'user_content/stories.html';return false;}> 
    Link 
</a>

etc.