Mark Pieszak: Rendering JavaScript on the Server? Welcome to Angular Universal.

published Oct 20, 2017

Keynote talk by Mark Pieszak at the Plone Conference 2017 in Barcelona.

[Sorry Mark, I came in late.]

SSR = server side rendering

Create an app.module.ts and an app.server.module.ts

  • Static SSR is done at build time.
  • Dynamic SSR is done at run time.

SSR gotchas:

  • If you use window or document, the server does not know what to do: this only lives in the browser. If you must, create a WindowService and use dependency injection to provide different versions. Use isPlatformBrowser() as much as possible. Hide things from node. Not all parts need a server version.
  • Be careful with timeouts, because they will let your server wait.

Conclusion:

  • Universal makes SEO possible.
  • Universal gives really fast initial painting of your app, and you keep the interactivity. Can be two to three times faster on mobile.
  • Be mindful of browser-specific things you might be using in your code.
  • Choose third party libraries carefully, as they need to be mindful of the pitfalls as well.
  • It takes a bit of work, but it is worth it

Further reading: