Best approach to make a single page application : <p>I have seen many sites rendering json data in string format along with html in their page response:</p>

<p>Take an instance of this for example: view-source:<a href="https://www.netflix.com/in/" rel="nofollow noreferrer">https://www.netflix.com/in/</a></p>

<p><a href="https://i.stack.imgur.com/bDU7X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bDU7X.png" alt="enter image description here"></a></p>

<p>What is the benefit of rendering JSON in string format in page response itself.
One can render the page and can load data via ajax too when the page has rendered.</p>

<p>I am thinking to build a SPA website totally on Angular with no server controls on my page, all data coming via REST API.</p>

<p>What should be my approach on page rendering:</p>

<ol>
<li><p>Load the page (kind of blank) and then do a hit via ajax calls via Angular and fill the data into the page. This could have loading effect initially.</p></li>
<li><p>Load everything in html form page initially via server side code. No ajax request on load of the page this time. If a user wants some more data I can do an ajax request via Angular further.</p></li>
<li><p>Load JSON, the data for the page (in stringify format in script tags)  + some html. The JSON data will be used to by Angular for templating and render the html there only. No ajax request is made this time too on page load since I rendered the data in json format along with page source. This is the case I posted earlier with Netflix url.</p></li>
</ol>

<p>What should be the best approach based on usability issue. I know Angular is great, but what is the best approach here to make a SPA.</p>
