angularjs taking over already server-side rendered page

Question

So, I want the community advice about angularjs taking over already server-side rendered page.

angularjs is great! but there is a real drawback when it comes down to first page load performance and SEO. obviously angularjs is not compatible with server-side rendering.

to make a long story short, I want to server-side render a page, get it back to the user/bot as fast as I can with all the data. then, in the background, bootstrap angular to apply the page behavior. when there is a request to load a new data, I only want to load the data and bind to the content without refreshing everything and round-trip to get html.

currently, I use Velocity for server-side template engine to create the rendered page, and then use angular.bootstrap async to apply angular.

problems with the solution:

1. two view tech - I render the page twice (although at the second time nothing is happened but I write the code twice)

2. Velocity is not the easiest way to write views. it is quite old tech and I don't really like it.

So, What is your opinion? Thanks in advance !!!

Answer 1

For SEO, I think the best approach is to serve pre-rendered HTML snapshots to search engine crawlers.

Basically, search engine crawlers will hit your page with some special query string parameters to identify themselves as crawlers instead of real users. When you detect the URL pattern, you can serve a pre-rendered JavaScript-less snapshot of your page.

Check out Google's explanation on this: https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

As for first page loading, if your double curly brackets are showing up before bootstrapping, use the ng-bind directive (https://docs.angularjs.org/api/ng/directive/ngBind). If you don't like the way your page is displayed before data is retrieved, either use resolve on your controllers or show the appropriate loading indicator (spinner, "Loading..." or whatever you like) to inform the user that loading is in progress.

Resolve is supported by both the default Angular router and the ui-router. You can find examples online for how to use them.