Inject server rendered app at mount point. (#414)

goto-bus-stop · web-flow · commit ebc5259413a6 · 2018-03-14T10:17:36.000+01:00
Server rendering can reply with a `.selector` property indicating where the rendered content should be mounted. It's optional; by default we assume that we're rendering into the `<body>`. This injects the server rendered content into the html _after_ all the head tags are added, which should speed it up a bit for views with lots of html. It detaches the initial template generation (the `head` function) from injecting the server rendered response, so we can implement custom index.html files (#343) later too.
diff --git a/lib/graph-document.js b/lib/graph-document.js
@@ -74,10 +74,11 @@ function node (state, createEdge) {
     var route = content.route
     var title = content.title
     var body = content.body
+    var selector = content.selector
 
     var hasDynamicScripts = state.scripts.list.buffer.length > 0
 
-    var html = head(body, language)
+    var html = head(language)
     var d = documentify(entry, html)
     var header = [
       viewportTag(),
@@ -111,6 +112,11 @@ function node (state, createEdge) {
 
     d.transform(addToHead, styleTag({ hash: state.styles.bundle.hash, base: base }))
 
+    d.transform(insertApp, {
+      selector: selector,
+      body: body
+    })
+
     function complete (buf) { done(null, buf) }
 
     pump(d.bundle(), concat({ encoding: 'buffer' }, complete), function (err) {
@@ -119,9 +125,9 @@ function node (state, createEdge) {
   }
 }
 
-function head (body, lang) {
+function head (lang) {
   var dir = 'ltr'
-  return `<!DOCTYPE html><html lang="${lang}" dir="${dir}"><head></head>${body}</html>`
+  return `<!DOCTYPE html><html lang="${lang}" dir="${dir}"><head></head><body></body></html>`
 }
 
 // Make sure that rel=preload works in Safari.
@@ -215,6 +221,14 @@ function addToHead (str) {
   })
 }
 
+function insertApp (opts) {
+  return hyperstream({
+    [opts.selector]: {
+      _replaceHtml: opts.body
+    }
+  })
+}
+
 // Specific to the document node's layout
 function extractFonts (state) {
   var list = String(state.list.buffer).split(',')
diff --git a/ssr/choo.js b/ssr/choo.js
@@ -75,6 +75,7 @@ module.exports.render = function (app, route, cb) {
     if (body) res.body = body
     if (app.state.title) res.title = app.state.title
     if (app.state.language) res.language = app.state.language
+    if (app.selector) res.selector = app.selector
     cb(null, res)
   }
 }
diff --git a/ssr/index.js b/ssr/index.js
@@ -18,7 +18,8 @@ module.exports = class ServerRender {
     this.DEFAULT_RESPONSE = {
       body: '<body></body>',
       title: '',
-      language: 'en-US'
+      language: 'en-US',
+      selector: 'body'
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,7 @@ module.exports.render = function (app, route, cb) {`
`75`	`75`	`if (body) res.body = body`
`76`	`76`	`if (app.state.title) res.title = app.state.title`
`77`	`77`	`if (app.state.language) res.language = app.state.language`
	`78`	`+ if (app.selector) res.selector = app.selector`
`78`	`79`	`cb(null, res)`
`79`	`80`	`}`
`80`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@ module.exports = class ServerRender {`
`18`	`18`	`this.DEFAULT_RESPONSE = {`
`19`	`19`	`body: '<body></body>',`
`20`	`20`	`title: '',`
`21`		`- language: 'en-US'`
	`21`	`+ language: 'en-US',`
	`22`	`+ selector: 'body'`
`22`	`23`	`}`
`23`	`24`	`}`
`24`	`25`