Server-Side Rendering for Angular

A minimal Angular starter for Universal JavaScript using TypeScript and Webpack

If you're looking for the Angular Universal repo go to angular/universal

This demo is built following the Angular-CLI Wiki guide

We're utilizing packages from the Angular Universal @nguniversal repo, such as ng-module-map-ngfactory-loader to enable Lazy Loading.

This repo demonstrates the use of 2 different forms of Server Side Rendering.

Prerender(prerender)

• Happens at build time
• Renders your application and replaces the dist index.html with a version rendered at the route /.

Server-Side Rendering(ssr)

• Happens at runtime
• Uses ngExpressEngine to render you application on the fly at the requested url.

• npm install or yarn

• run npm run start which will start ng serve

npm run build:ssr && npm run serve:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000.

npm run build:prerender && npm run serve:prerender - Compiles your application and prerenders your applications files, spinning up a demo http-server so you can view it on http://localhost:8080 Note: To deploy your static site to a static hosting platform you will have to deploy the dist/browser folder, rather than the usual dist

When building Universal components in Angular there are a few things to keep in mind.

• For the server bundle you may need to include your 3rd party module into nodeExternals whitelist

• window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:

  • If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.

   import { PLATFORM_ID } from '@angular/core';
   import { isPlatformBrowser, isPlatformServer } from '@angular/common';
   
   constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
   
   ngOnInit() {
     if (isPlatformBrowser(this.platformId)) {
        // Client only code.
        ...
     }
     if (isPlatformServer(this.platformId)) {
       // Server only code.
       ...
     }
   }

  • Try to limit or avoid using setTimeout. It will slow down the server-side rendering process. Make sure to remove them ngOnDestroy in Components.
  • Also for RxJs timeouts, make sure to cancel their stream on success, for they can slow down rendering as well.

• Don't manipulate the nativeElement directly. Use the Renderer2 from "@angular/core". We do this to ensure that in any environment we're able to change our view.

constructor(element: ElementRef, renderer: Renderer2) {
  this.renderer.setStyle(element.nativeElement, 'font-size', 'x-large');
}

• The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
  • Use a cache that's transferred from server to client (TODO: Point to the example)
• Know the difference between attributes and properties in relation to the DOM.
• Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native element the src attribute is reflected as the src property of the element type HTMLImageElement.