page rendering on server side and client side

[Mahmoud-hassan87]

When try this example I show the page rendering twice on server side and rendering again on client side, Why this behavior occurs ?

[Gbuomprisco]

Hi @Mahmoud-hassan87,

I have the same issue and looking for a solution, even though I don't think this seed is responsible for the issue, must be a Universal issue instead. They did have an issue for this particular bug but they closed it.

[fulls1z3]

@Gbuomprisco can you please share the issue url here? Maybe I can catch something from the information there.

[Mahmoud-hassan87]

Your sample have this issue

[Gbuomprisco]

@fulls1z3 What I experience is exactly what is described in this issue angular/universal-starter#139, and also others. Thing is these might be outdated now as they were using last year's code.

[fulls1z3]

@Gbuomprisco the info seems outdated, but can be useful. I'll dig into this a little this evening and see what can I do.
@Mahmoud-hassan87 thanks for the enlightment 👍

[Gbuomprisco]

Thanks @fulls1z3, I'll try as well

[Koslun]

@Mahmoud-hassan87 Not sure but you might be seeing this issue: angular/angular#15716. Essentially the issue is that the server-rendered CSS is removed from the DOM before the client CSS is applied, causing a flicker regardless of if you transfer the state perfectly or not.

Apparently a fix should be landing in the next angular releases, i.e. 4.1.3 and 4.2.0-beta.2. Where the renderer waits for the client to finish before removing the server CSS.

[Gbuomprisco]

Thanks @Koslun

[fulls1z3]

@Koslun thank you so much for this information, now I realized the reason that I subscribed to the updates of angular/angular#15716. Seems like we'll get it working soon, and I'm keeping this issue open in order to do not leave it unresolved.