Server Side Rendering (SSR)

[rafsanulhasan]

Hello, This is a very well organized, well-described ASP.NET Core project template with Angular 4 support. However, SSR or Server side rendering or pre-rendering feature should be used to make this template perform better and will definitely add User Experience. How can I integrate server side rendering (SSR) with the project template? Because SSR hugely improves performance in production servers (real scenarios). Please try to add files "ClientApp\boot.server.ts" and "ClientApp\App\app.module.{server/browser/shared}.ts" and edit webpack.config.js and webpack.config.vendor.js appropiately to enable SSR in the project

[CybrZr00]

I've managed to do this, but it needed quite a bit of work. A lot of components rely on window, document, and even mouse / keyboard events which are not easily available with SSR. Best bet is to start from an SSR template, but not the VS inbuilt ones as they are stupidly buggy and outputting tags and titles is a nightmare. There is a custom ASP.net template on git hub which works well, but you have to strip it right down as its got a lot of components you don't want and the ngx-bootstrap doesn't work so well... https://github.com/MarkPieszak/aspnetcore-angular2-universal You can then copy over the parts you want, making adjustments as you go using IsPlaformBrowser() as needed and adding 3rd party components and directives for things like local/session storage (angular2-cool-storage) You'll also need to use regular tables as the datatables component used here isn't compatible with SSR. I used bootstrap 4 and have written my own code to make modals etc. work. Today Authentication stopped working with this template, so you may have that to contend with as well.

[rafsanulhasan]

Would you please specify which components should i remove to make this project compatible with SSR. Like you said using regular tables instead of datatables components, angular2-cool-storage instead of the one you used. It will help me refactoring the template.

[CybrZr00]

Its tricky, your skill level may be higher than mine meaning you can get more to work! Even the components that I left in have been edited! I have kept the all the services (modification needed) etc, I struggled with Alertify.js but got that working and so was able to keep the alert service working. I removed the notification service and translation as it wasn't needed, but I'm sure you could get them working easily. I edited the html in most cases because of the removal of translation, ngx-datatables, and ngx-bootstrap. I switched to ngx-toastr which meant making some changes (sticky messages are an issue, I just gave them a huge timeout), ng2-toasty had issues for some reason. I removed the orders, products etc and left the Email, Users and Roles (Edited as needed).

Its really something you just have to jump in and do, I made a note of what I wanted, and then a note of the dependencies / imports they needed and just copied it out, got to a point where I could test the login, once that was working I checked the storage and found there were times that data was missing, hence ng2-cool-storage being used, then proceeded to add users and roles management, I didn't make use of site prefs. One important thing I advise is, regular back-ups, and try not to overwrite them.

If you use the template in the link I gave, you'll find that you don't need to use (I didn't) the server and browser specific module, and mainly use the shared app.module. Also keep the method for changing titles and tags in app.component and in the routes! Its really handy. This is how I got alertify working. isPlatformBrowser is very handy!!

import { isPlatformServer, isPlatformBrowser } from '@angular/common';
import { Component, Inject, ViewEncapsulation, PLATFORM_ID} from '@angular/core';
var alertify: any;
@Component({
...
...)}
export class AppComponent {
constructor(@Inject(PLATFORM_ID) private _platformId: Object){
        if (isPlatformBrowser(this._platformId)) {
            alertify = require('../../wwwroot/dist/alertify.js');
        }
}
}

[emonney]

Server Side Rendering is not included in this template at the moment

[k11k2]

@emonney when can we expect ?

[RonYaari]

@emonney Can you tell me where do you think it will be available for us? I mean the Server-Side Rendering