Async Service Runs Again on Client After Resolving and Rendering on Server

[davidkaminsky]

Hello, not sure which project is the right one to post this on but I'm using the universal-starter and modifying it a bit to do some testing and have noticed that if I do a simple async service, it'll resolve and then render on the server and immediately do it again on the client - the result is it actually takes twice as long for the user to see anything. My simple service looks like this:

import {Injectable} from '@angular/core';

import {UserProfile} from './user-profile';

@Injectable()
export class UserProfileService {
    getUserProfile() {
        return new Promise<UserProfile>((resolve) => {
            setTimeout(() => {
                resolve({
                    email: '[email protected]',
                    name: 'Test Person',
                    phone: '+15555555',
                    uid: '1234'
                });
            }, 2000);
        });
    }
}

where UserProfile looks like this:

export class UserProfile {
    email:string;
    name:string;
    phone:string;
    uid:string;
}

I've linked this service to display stuff like email and name in a component once the service resolves. What I see is that the server does wait for the promise to resolve and renders on the server the email and name - you can see this by viewing the source HTML. However, after it does this, it does it again as soon as the client initializes so I end up seeing 4 seconds on blank white screen instead of just the 2 while the server waits for the promise to resolve.

Is this expected behavior or is something broken?

[MarkPieszak]

Does it work better if you switch it to async: false in src/server.ts ?

[PatrickJS]

this is expected behavior since you would need to provide a way to transfer the cache (state) to the client and then have your service look in the cache before making the async call

[davidkaminsky]

@gdi2290 is there a prescribed way of doing this at the moment? I thought this was part of what preboot was supposed to handle? this is obviously something i could create for my service - just thought it was handled.

[jeffwhelpley]

So, everything in your app will run twice by default, but that should not adversely affect any UX. The user should see the server view immediately and then the client view is displayed only after the data is fetched and rendered on a hidden div. Please get the latest and then check out existing open issues if you run into any problems. In all likelyhood the only thing you will run into is a small flickering issue that we are working on with #139. If you see anything else, let me know.

[jeffwhelpley]

And, FYI, you can easily cache data between server and client but it is not something built into the library right now.