Is Angular Universal Still a SPA?

user_4977957 0
Viewed 626

I have read a few articles, some of which were the official Angular Universal page, an introduction here, etc.

I don't fully understand - does the Angular Universal server still serve a SINGLE page (a huge blob of html), or is there a way to configure Angular Universal to return MULTIPLE pages (one part of the application at a time) based on the route (request / route)?

The end goal is to return hard 404s if a route doesn't exist (but that's outside of the scope of this question, just for context).

The confusing part for me is here:

This is because together with the server-side rendered HTML, we will also ship to the browser a normal client-side Angular Application.

This Angular client application will then take over the page, and from there on everything is working like a normal single page application, meaning that all the runtime rendering will occur directly on the client as usual.

So, what exactly is the server-side rendered HTML? Is it the WHOLE app pre-rendered, or is it somehow specific to the one "route"/view/whatever that the user requested?

angular-universal angular
2 Answers

TL;DR

  • Angular Universal serves your initial index.html page as a pre-rendered html file so that the user has no (long) waiting time.
  • It also sends the entire SPA alongside the initial pre-rendered index.html.
  • While the user can start immediately interacting with the initial page (e.g. index.html), the SPA is bootstrapping in the background.
  • As soon as the SPA has finished with bootstrapping, it starts handling user requests.

A discourse on SPAs

The intention behind Angular, and other similar frameworks and or libraries (e.g. React), is to serve something called a Single Page Application (SPA). A SPA is a fully-fledged application running inside your browser that renders different pages on its own without interacting with a backend server. Mostly, it only communicates with a backend server if it requests additional data that may be displayed in the SPA.

Bootstrapping a SPA can be slow

While SPAs are really great and eliminate the need of requesting files from a backend server each time the user navigates to another page of your web application, the initial start-up time of a SPA can be very slow (depending on the clients machine) and may result in an initial blank page or a loading indicator while the SPA is bootstrapping.

Angular Universal

To eliminate waiting time for your user by looking at a spinning loading icon or a blank page, Angular Universal offers the possibility to serve the initial index.html page of your application by pre-rendering it in the backend. In addition it sends the Angular Application (your SPA) to the clients browser alongside the pre-rendered index.html.

Example

For example, this could be the login page of your application that is pre-rendered in the backend and served to the user. In the end, the user can immediately start interacting with the, in this example login page, while your SPA is still bootstrapping in the background of the users browser. And at the time where the user remembers his credentials, the SPA has finished bootstrapping and serves all future requests of the user. Thereby, the user does not have to stare at a loading animation or blank page and is less likely to abandon your web page.

user_48099320

Yes, an app rendered using angular universal is still an SPA. What is rendered dynamically is just the page corresponding to your current route when you get to your website, so route/view/whatever. After, whenever you navigate through your routes, it's just normal SPA angular navigation (you don't actually refresh the whole page)

The html corresponding to that route is generated dynamically with angular universal and returned to the client, ensuring a SEO friendly and fast page. The client angular app then bootstraps and replays the API requests and component creation, but you don't get a blank page while it occurs.

You might however get some 'flicker' when the client app takes over, but this can be solved using TransferState and other techniques

user_11607940
Related