head management

yyx990803 · yyx990803 · commit 836cb9a1768e · 2017-04-25T17:54:13.000+08:00
diff --git a/en/bundle-renderer.md b/en/bundle-renderer.md
@@ -30,6 +30,7 @@ We will discuss how to configure webpack to generate the build artifacts needed
 const { createBundleRenderer } = require('vue-server-renderer')
 
 const renderer = createBundleRenderer(serverBundle, {
+  runInNewContext: false, // recommended
   template, // (optinal) page template
   clientManifest // (optional) client build manifest
 })
@@ -47,3 +48,11 @@ server.get('*', (req, res) => {
 ```
 
 When `rendertoString` is called on a bundle renderer, it will automatically execute the function exported by the bundle to create an app instance (passing `context` as the argument) , and then render it.
+
+---
+
+### The `runInNewContext` Option
+
+By default, for each render the bundle renderer will create a fresh V8 context and re-execute the entire bundle. This has some benefits - for example, we don't need to worry about the "stateful singleton" problem we mentioned earlier. However, this mode comes at some considerable performance cost because re-executing the bundle is expensive especially when the app gets bigger.
+
+In `vue-server-renderer >= 2.3.0`, this option still defaults to `true` for backwards compatibility, but it is recommended to use `runInNewContext: false` whenever you can.
diff --git a/en/head.md b/en/head.md
@@ -0,0 +1,108 @@
+# Head Management
+
+Similar to asset injection, head management follows the same idea: we can dynamically attach data to the render `context` in a component's lifecycle, and then interpolate those data in `template`.
+
+To do that we need to have access to the SSR context inside a nested component. We can simply pass the `context` to `createApp()` and expose it on the root instance's `$options`:
+
+``` js
+// app.js
+
+export function createApp (ssrContext) {
+  // ...
+  const app = new Vue({
+    router,
+    store,
+    // all child components can access this as this.$root.$options.ssrContext
+    ssrContext,
+    render: h => h(App)
+  })
+  // ...
+}
+```
+
+This can also be done via `provide/inject`, but since we know it's going to be on `$root`, we can avoid the injection resolution costs.
+
+With the context injected, we can write a simple mixin to perform title management:
+
+``` js
+// title-mixin.js
+
+function getTitle (vm) {
+  // components can simply provide a `title` option
+  // which can be either a string or a function
+  const { title } = vm.$options
+  if (title) {
+    return typeof title === 'function'
+      ? title.call(vm)
+      : title
+  }
+}
+
+const serverTitleMixin = {
+  created () {
+    const title = getTitle(this)
+    if (title) {
+      this.$root.$options.ssrContext.title = title
+    }
+  }
+}
+
+const clientTitleMixin = {
+  mounted () {
+    const title = getTitle(this)
+    if (title) {
+      document.title = `Vue HN 2.0 | ${title}`
+    }
+  }
+}
+
+// VUE_ENV can be injected with webpack.DefinePlugin
+export default process.env.VUE_ENV === 'server'
+  ? serverTitleMixin
+  : clientTitleMixin
+```
+
+Now, a route component can make use of this to control the document title:
+
+``` js
+// Item.vue
+export default {
+  mixins: [titleMixin],
+  title () {
+    return this.item.title
+  }
+
+  asyncData ({ store, route }) {
+    return store.dispatch('fetchItem', route.params.id)
+  },
+
+  computed: {
+    item () {
+      return this.$store.state.items[this.$route.params.id]
+    }
+  }
+}
+```
+
+And inside the `template` passed to bundle renderer:
+
+``` html
+<html>
+  <head>
+    <title>{{ title }}</title>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+**Notes:**
+
+- Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks.
+
+- You should provide a default title when creating the `context` object in case no component has set a title during render.
+
+---
+
+Using the same strategy, you can easily expand this mixin into a generic head management utility.
