Why is single-page apps faster when it generally has to make more requests per page?

Question

How are single-page apps (SPAs) supposed to be faster when generally SPAs have to make multiple requests to get data for different parts on the page? As opposed to rendering server side, where the browser only has to make a single request to get the whole page?

I also remember reading somewhere that opening/closing a web request is the bottleneck sometimes in web requests.

So why does an approach that makes more requests per page is supposed to make web sites faster?

Answer 1

Because you only load what you need.

For example, on a "normal" web page, the menu, sidebar, etc. would have to be rerendered on each page, but with an SPA only the content gets changed.

In addition, think of this case: A website that displays 100,000 items on the front page (with pictures). In the traditional case, it will take a long time to load the page, but with an SPA you only load the "first screen" (i.e. what the user can see), and load the rest as he scrolls down.

In other words, SPAs aren't magic: it's just that they only need to update the bits of the page that change, which makes the response time lower for users (i.e. they can "use" the new contact faster).

Answer 2

If well done, they are faster because:

• Part of the server workload is offset to the client.
• Only the needed page fragments are loaded at any given time.
• Redundant templating code is reduced. One template can style many items, as opposed to having to output a lot of HTML for a full page at once.

They also facilitate lazy loading and the download of new data during idle times, and parallelism: the concurrent downloads of elements.