Browser Versus Server#

The code of the application built in the previous module is available for download here. Once you download it, remember to install the project using the npm install command inside the project directory.

Where you are#

In the previous module, you've applied Angular Universal schematics to a production-ready application. You've also learned how to significantly improve Time To First Byte in production environment. Here's how your application works right now:

On the one hand, your solution is fully functional. Thanks to Angular Universal, you share the code base between your server-side and browser-side bundles. On the other hand, there is still plenty of room for improvement. Let's take a look at the detailed server-side flow of the application (purple arrows shows HTTP communication; green arrows shows in-app communication):

1. The user navigates to the application's root path (/).

2. server.ts recognizes that an Angular route has been invoked, so it bootstraps the rendering process.

3. ProductListComponent retrieves a list of products using ProductsService.

4. ProductsService sends an HTTP request to retrieve the list of products from the /api/products endpoint.

5. server.ts recognizes the API request and passes it to api.ts.

6. api.ts queries MongoDB to retrieve the requested data.

7. The list of products is sent back to ProductsService as an HTTP response.

8. The rendered HTML is sent back to the user.

You can observe this behavior by running the application in development mode:

npm run dev:ssr