SSR pass data from server to client

🚀 feature request

Relevant Package

This feature request is for @angular/universal

Description

Inspired by Next.js getInitialProps to improve SSR performance in Angular. getInitialProps allows us to easily pass data from the server side to the client side, and by doing so save a lot of the initial ajax requests we need to send in the client.

consider the following code:

constructor(private _http : HttpClient) {}
ngOnInit() {
    this._http.get('get some data and populate the template with that data')
}

if running on SSR the request will be sent both on the server side and on the client side (on initial load). The loading of the data would be much quicker if the request would only be sent on the server side and data will be transfered easily from the server side to the client side.

Next.js solved it by adding a static method that will be run on the server on the initial load and if not in the initial load it will run on the client. So inspired by this API I suggest adding another lifecycle hook on the component that will run on the server only on initial load and will pass the data to the ngOnInit. It will look something like the following:

constructor(private _http : HttpClient) {}

/**
 * this will run only on the server on initial load
 * this will run on the client when not in initial load
 *  
 */
ngSnapshotInit() : Promise<any> | Observable<any> {
    return this._http.get('...');
}

/**
 * @param data  - the data im getting from the ngSnapshotInit
 */
ngOnInit(data) {
    this.displayOnTemplate = data;
}

Leveraging the power of server side to make our initial AJAX requests will not only make our app load quicker but also the user won’t see annoying jumps with the data grabbed twice with double the requests.

[VagrantAI-c]

TransferState is what you looking for https://github.com/angular/universal/blob/master/docs/transfer-http.md

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}