JSFoo 2019

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.

Outline

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.

Is there a way to move Angular rendering process to the server and deliver richer content to the browser instead of pure index.html with tones of JavaScript? Yes, there is! It is called Angular Universal, and thanks to it, we achieve much faster First Meaningful Paint of our website! However, there are some pitfalls and risks as well...

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.

Speaker bio

Senior Software Development Engineer at Akamai Technologies.
Enthusiast of web technologies especially Single Page Apps, Progressive Web Apps, microservices, and Internet of Things. Author of articles about JavaScript, NodeJS, and Angular. Open Source contributor - creator of @ng-toolkit opensource project - set of tools for expanding existing Angular applications.