SSR with (RE)Hydration in Angular

Question

Angular Universal is for Server side rendering.

I have a full functional Angular app. To increase FCP. I need to hydrate with server side rendering.

Is Angular universal allows dynamic SSR. Loading certain components in server side ?

I couldn't find anything related to that.(Yes I did some google search on it).

I have found similar topic here,but i need to know more than that.

The dicision boundary between Angular & Angular Universal.

Found some articles related here.

Does it bypass data to back-end or it doesn't care about data,only renders static data ?

Is following scenario possible in angular universal

If I have three components on a page

<Comp1></Comp1>
<Comp2><Comp2>
<Comp3><Comp3>

Comp1 and Comp3 are mostly static .Comp2 is user specific. I don't want comp2 to be rendered in server side. Comp1 and Comp3 from server rendering and Comp2 on client side.

Answer 1

The way angular universal works is that components are rendere server side, and then, once the page is loaded, the client-side angular app takes over and re-render the components.

You can sometimes have some flicker while the client-side requests data from the API if you do not use State Transfer.

If all you want is not to render Comp2 server side, then you can simply add some cndition based on the platform (browser/server)

template.html

<Comp1></Comp1>
<Comp2 *ngIf=isBrowser></Comp2>

component.html

import {Injectable, Inject, PLATFORM_ID, Optional} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";

isBrowser: boolean = false;

constructor(@Inject(PLATFORM_ID) private platformId: Object)
{
    this.isBrowser = isPlatformBrowser(this.platformId);
}

But note that Comp1 will be rendered again client side anyway