Single-page applications (SPA) have quickly become a web standard. Almost every website is SPA these days. They give users a native-like app experience with smooth transitions, you don't need to bother with preparing your application for different browsers (frameworks take care of that), and much more. However, they have at least one big pitfall: they are rendered in the browser rather than on the server. To understand the problem, consider the browser's simplified workflow. The browser:

• Establishes a connection with the server (queries DNS, sets up an SSL connection, etc.) and requests data.

• Retrieves the data.

• Renders HTML.

• Applies CSS.

• Bootstraps JavaScript.

As you can see, the moment when your Angular application is bootstrapped is at the very end of the workflow. That's why it takes so long to render the first contentful paint.

SPAs have one more pitfall. Because content is rendered in the browser, the index.html file shipped to the end user has no content. What if your end user is a web crawler?

Guide to Angular Universal#

In this course, you will learn how to address these pitfalls by bootstrapping your Angular application in Node.js and serving the end user's browser with fully rendered HTML views. You will learn how to improve your overall application performance and boost its Google PageSpeed Insights score from 66 to 95 points!.

In the first course module you will build a regular Angular application served from the Heroku. Such application scores around 60-70 points in the PageSpeed Insights audit:

Moreover, it takes a little bit to ship the first byte (about 70ms):

At the very end of this course, your application will score over 90 points:

And TTFB will be decreased to 38ms:

In addition to learning to apply Angular Universal in existing applications, you will learn best practices and techniques such as:

• Preparing separate logic paths in your application for browser and server runtimes.

• Preparing server-specific Angular services.

• Working with HTTP requests in Angular.

• Transferring data between the server and the browser along with the application bundle.

• Abandoning long-running API calls that affect server-side rendering performance.

• Using Redis to cache rendered views on the server.

• Testing server-side code.

• Pre-rendering Angular applications to publish them using static hosting.

During this course you will build an Angular application that:

• Responds to each HTTP request with fully rendered HTML.

• Retrieves content from MongoDB.

• Uses the TransferState registry to embed data retrieved during rendering into the application bundle and send it to the browser.

• Contains routes that are only available to authenticated users.

• Is fully functional also for users with disabled JavaScript.

• Uses Redis to cache rendered views and ship them to the end user even faster.

You will learn how to:

• Apply best performance tuning practices such as image lazy loading, deferring CSS, and using new image file formats: WebP and AVIF.

• Enable gzip compression that improves your application's performance.

• Use a CDN with your application and enable HTTP2 to ship your content even faster.