Angular universal page load twice in server side rendering ( ssr )

Question

I had added angular universal in the website due to this first page loads twice. Please someone Provide the exact answer to this question. After clicking view page source I want to see the whole code in. When I do like this

<section  style="background-color: rgb(202, 202, 202);" >
    <div class="container" style="background-color: #fff;">
        <router-outlet (activate)="onActivate($event)"></router-outlet>
    </div>
</section>

I can inspect the code but the problem is page loads twice

but when I use this code in my code

  <section *ngIf="this.isBrowser" style="background-color: rgb(202, 202, 202);" >
        <div class="container" style="background-color: #fff;">
            <router-outlet (activate)="onActivate($event)"></router-outlet>
        </div>
    </section>

I can't inspect code but the loading time will reduce

What I will do to solve this problem

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Sep 2, 2021 at 18:57
Hey buddy, what's the implementation of onActivate(event: Event)? — Capt. Michael
– Capt. Michael, Commented Jun 22, 2022 at 0:17

David · Accepted Answer · 2021-09-06 09:37:56Z

2

This is how angular universal works.

your express server receives the request
Angular app is bootstrapped server side and components are rendered server side (and so make API requests if needed).
The page html is sent to the client browser
Html is displayed
Javascript is parsed
angular app is bootstrapped client side, components are initialised and make the same API requests if needed

answered Sep 6, 2021 at 9:37

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular universal page load twice in server side rendering ( ssr )

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related