Sharing Top Content from the Angular-sphere.

Pre-rendering Angular Applications

Pre-rendering #angular Applications #JavaScript

  • SSR executes the Angular application on the server.
  • This is really the best of both worlds: The application will be rendered on the server, but when the JavaScript bundle is loaded, it will turn into a SPA.
  • Sometimes it took 4 seconds to serve the content… Since the loading time of a website is very important for keeping our visitors, we had to find another way to serve the content in a more effective manner.
  • Since the file is used to bootstrap the application for the browser, we also need a file that will be used to create the prerender bundle.
  • We need a specific tsconfig file that compiles the bundle to something that the node server can read.

Learn how to use Server-side rendering to prerender our Angular application at build time.

At the moment of writing this article, there are several ways of optimizing Angular applications – We could compile them ahead-of-time through AOT compilation. We could use service workers to optimize caching. And there are plenty of other PWA (progressive web app) features that can increase the quality and overall performance of our Angular applications.

However, there are a still a few problems that these optimizations won’t fix:

These two problems can be fixed by implementing SSR (server-side rendering). SSR executes the Angular application on the server. That way the server will actually serve the compiled content in a way that search engine crawlers can read it. This is really the best of both worlds: The application will be rendered on the server, but when the JavaScript bundle is loaded, it will turn into a SPA. That way the application is rich and fast at the same time!

To optimize our StrongBrew website, we started using this approach. It was pretty fast when we ran it locally. However, the StrongBrew website is hosted on Firebase and the SSR part was hosted by Firebase functions.

We really love Firebase and everything it stands for, but for us, SSR on Firebase functions was just too slow. Sometimes it took 4 seconds to serve the content… Since the loading time of a website is very important for keeping our visitors, we had to…

Pre-rendering Angular Applications