Handling long-running API calls

Long running API calls can affect your application rendering time, that might lead to the SEO disaster. In this lesson you will learn how you can protect your application against such situation.

The Nightmare of Long-Running HTTP Calls#

Angular Universal gives your application the advantage of performing HTTP calls on the server. On the other hand, performing an HTTP call takes time. What if a call is long-running? You can simulate this behavior by slowing down one of the endpoints in terrain-shop-service. Introduce a setTimeout to the /promotions endpoint to delay the response:

Use Postman to check how long it now takes to render the http://localhost:4200/terrain-shop landing page:

An equivalent test can be performed using cURL:

Your application's rendering process is as fast as the slowest API call!

Introducing API watchdog#

To protect yourself against such situations, you can set up a route resolver that allows you to get data before navigating to a new route.

Thanks to the isPlatformServer() and isPlatformBrowser() methods, you can determine the current runtime of the Angular application and modify the logic of the resolver accordingly.

Generate a new route resolver service:

Copy the following code to src/app/terrain-shop-resolver.service.ts:

The code above introduces the TerrainShopResolverService class that implements the Resolve interface. To fulfill its interface contract, TerrainShopResolverService implements the resolve() method. Inside this method, you check the current runtime of the application.


This page is a preview of The newline Guide to Angular Universal

Start a new discussion. All notification go to the author.