Angular 5 how to switch from server side rendering to client side rendering when the app is loaded

Question

I'm using Angular + ASP.NET core. By default, it incorporates the server-sider rendering. It's reasonable because the loading takes time. Before the app is bootstrapped correctly, a server-rendering page is really necessary.

However, I find when I click any anchor link, , instead of routing from the client side, the whole document is refreshed. It's too heavy.

I'm wondering when the app is already bootstrapped, how could I disable the server-side rendering and use the client-side rendering only?

Answer 1

It's the wrong question. The reason causing the whole document reloading is not due to server-side rendering, but due to using href on the anchor element. Instead, I should use routerLink.

Answer 2

You have a couple of options here.

Option 1

<a href="javascript:void(0)" (click)="functionContainingRoutingLogic()">My Link</a>

Note that the href is set to javascript:void(0) and the routing logic will be written in the Typescript in the function functionContainingRoutingLogic() . Something like this:

public functionContainingRoutingLogic() {
  this.router.navigate(['route_name_defined_in_your_router_config']);
}

Option 2

<a href="javascript:void(0)" 
  [routerLink]="['/route_name_defined_in_your_router_config/']">My link</a>

So, here you are providing the route name directly in the html

Note: if you have href="#" or href="anything else" , clicking on it will reload the same page