Angular Router : Route Resolver 以及对 UX 的影响

Question

I was wondering how to decide to use a route resolver to prefetch the required data for a given container (component). If, in my case, the API is slow, the UX will suffer from the slow response. The user will click the link, try to navigate to the route but the API call will still be active and the router will not resolve the route until the data has been fetched. Then, I can cache the data for subsequent route navigation.

But the main question/discussion here is when to use the resolver (the ideal situation) and when to avoid it so the user isn't waiting after the response. What is the best practice ?

Answer 1

You can get about 300ms head start by preloading data when the user hovers the link/button.

http://instantclick.io/click-test

Answer 2

What is the best practice ?

It really depends on your app and its usage. On most desktop app, it really isn't necessary. I'd say the use case is for well thought UX.

A resolver is really useful for slow / mobile connections, It lets you gain a few ms. But if the request takes 3 seconds, a resolver won't be enough to calm your user, you need to go deeper and follow "reactive web app" principles and do things like display the "skeleton" of your component and then your data when loaded.

A resolver will add some performances to your app, but it won't be enough of it for really slow connections.

As when to avoid it, I don't really see a case were better performances will be bad. I guess sometimes the performances gain might not be really valuable and the time spent could be better use on something else.

Answer 3

IMO:

• Resolvers can be used for very tiny lite weight requests when you can be sure they will be processed quickly.
• But if you need to request some heavy information it is better to use ngOnInit with spinners or skeleton components ( demo (click "Reload with ghosts")).