Angular Universal - Be SEO, CDN & User friendly with Server-Side Rendering
Submitted by Maciej Treder (@maciejtreder) on Tuesday, 14 May 2019
Section: Workshop Technical level: Intermediate
Are you ready for production? Are you sure? Is your application prefetchable? Is it readable for search engine robots? Will it fit into Content Delivery Network? Do you want to make it even faster? Meet the Server-Side Rendering concept. Learn how to implement it in your application and gain knowledge about best practices, such as transfer state and route resolving strategies.
Most of the Single Page Applications, and Angular is not an exception here, manifest one common problem. They are not SEO/CDN/prefetching friendly.
Some could ask “Why should I care about that? My application bootstraps in the browser and looks awesome”, and they are right, as long as they are well-known companies who don’t need to position themselves on the market, AND their applications are closed ecosystems. In any other case, SEO and prefetching is a “to be or not to be” of the application.
During this talk I will cover how to implement server-side rendering (an official angular guide; and an alternative way by using schematics from ng-toolkit project); and how to deal with the problem which developers encounter while working with SSR:
- how to execute different code on NodeJS and inside the browser (different global objects available in both environments); with a real-life example: internationalization with ngx-translate (loading translations via HTTP and directly from the file system)
- How to convey to the browser the information that the back-end already did external API calls and there is no need to repeat them.
- How to abandon long-time calls to inefficient endpoints, and avoid delays in the server-side rendering process.
In closing, I will mention an alternative to SSR - prerendering, a process of rendering all subpages at the build time, and compare both techniques.
Senior Software Development Engineer at Akamai Technologies.