SSR with Angular
or "Why don't you use DOM in Node?"
NodeFest. 2017
@laco2net
about me
- Suguru Inatomi
- Twitter: @laco2net
- Kaizen Platform
- Angular Contributor
- Angular Japan User Group
(ng-japan)
GitHub: angular/angular-ja
Join us!
SSR with Angular
-
SSR is the first-class citizen of Angular
- a.k.a. Angular Universal
- Official Package: @angular/platform-server
- For Running Angular on Node.js
Why SSR?
- For Performance
- "Time To First Meaningful Paint"
- For SEO
- Rendering view without JS
Angular Rendering
- Renderer = fn(App) => View
- Environment Agnostic
platform-browser
BrowserRenderer = fn(App) => DOM
platform-server
ServerRenderer = fn(App) => DOM
Domino
- github.com/fgnass/domino
-
Server-side DOM implementation
- Based on Mozilla's dom.js
- Domino = DOM in Node
- ~3.4x Faster than jsdom
SSR with Domino
const domino = require('domino');
// 1. Create Document object
const window = domino.createWindow(
'<h1>Hello world</h1>',
'http://example.com
');
const document = window.document;
// 2. Manipulating DOM
// 3. Serialize the document to HTML string
const html = document.serialize();
Switched to Domino
Why did Angular choose Domino?
- Switched from Parse5
- HTML Parser for Node.js
- Angular simulated 'Document' in itself
- Need a too complex DOM Adapter to maintain
- Many JS libraries require native DOM elements
Conclusion
- SSR is the first-class citizen in Angular
- Official Supports
- Angular chose Domino
- DOM implementation in Node
- SSR Friendly: document.serialize()
- You can use 'document' in Node!
Thanks!
SSR with Angular
By Suguru Inatomi
SSR with Angular
Node学園祭 2017
- 4,174