fix: render meta tags during ssr

Author: ludanxer

Diff for: packages/@vuepress/core/lib/client/index.ssr.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{{ title }}</title>
-    <meta name="description" content="{{ description }}">
     <meta name="generator" content="VuePress {{ version }}">
     {{{ userHeadTags }}}
     {{{ pageMeta }}}

Diff for: packages/@vuepress/core/lib/client/root-mixins/updateMeta.js

@@ -1,14 +1,21 @@
 import unionBy from 'lodash/unionBy'
 
 export default {
+  // created will be called on both client and ssr
   created () {
     if (this.$ssrContext) {
+      const siteMetaTags = this.$site.headTags
+        .filter(item => item[0] === 'meta')
+        .map(item => item[1])
+
+      const meta = this.getMergedMetaTags(siteMetaTags)
+
       this.$ssrContext.title = this.$title
       this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
+      this.$ssrContext.pageMeta = renderPageMeta(meta)
     }
   },
-
+  // Other life cycles will only be called at client
   mounted () {
     // init currentMetaTags from DOM
     this.currentMetaTags = [...document.querySelectorAll('meta')]
@@ -31,13 +38,16 @@ export default {
       document.title = this.$title
       document.documentElement.lang = this.$lang
 
-      const pageMetaTags = (this.$page.frontmatter.meta || []).slice(0)
+      const newMetaTags = this.getMergedMetaTags(this.siteMetaTags)
+      this.currentMetaTags = updateMetaTags(newMetaTags, this.currentMetaTags)
+    },
+
+    getMergedMetaTags (siteMeta) {
+      const pageMeta = (this.$page.frontmatter.meta || []).slice(0)
       // pageMetaTags have higher priority than siteMetaTags
       // description needs special attention for it has too many entries
-      const newMetaTags = unionBy([{ name: 'description', content: this.$description }],
-        pageMetaTags, this.siteMetaTags, metaIdentifier)
-
-      this.currentMetaTags = updateMetaTags(newMetaTags, this.currentMetaTags)
+      return unionBy([{ name: 'description', content: this.$description }],
+        pageMeta, siteMeta, metaIdentifier)
     }
   },
 
@@ -89,3 +99,21 @@ function metaIdentifier (tag) {
   }
   return JSON.stringify(tag)
 }
+
+/**
+ * Render meta tags
+ *
+ * @param {Array} meta
+ * @returns {Array<string>}
+ */
+
+function renderPageMeta (meta) {
+  if (!meta) return ''
+  return meta.map(m => {
+    let res = `<meta`
+    Object.keys(m).forEach(key => {
+      res += ` ${key}="${m[key]}"`
+    })
+    return res + `>`
+  }).join('\n    ')
+}

Diff for: packages/@vuepress/core/lib/node/App.js

@@ -438,6 +438,7 @@ module.exports = class App {
       title: this.siteConfig.title || '',
       description: this.siteConfig.description || '',
       base: this.base,
+      headTags: this.siteConfig.head || [],
       pages: this.pages.map(page => page.toJson()),
       themeConfig: this.siteConfig.themeConfig || {},
       locales
@@ -499,4 +500,3 @@ module.exports = class App {
     return this
   }
 }
-

Diff for: packages/@vuepress/core/lib/node/build/index.js

@@ -77,9 +77,11 @@ module.exports = class Build extends EventEmitter {
     })
 
     // pre-render head tags from user config
+    // filter out meta tags for they will be injected in updateMeta.js
     this.userHeadTags = (this.context.siteConfig.head || [])
+      .filter(item => item[0] !== 'meta')
       .map(renderHeadTag)
-      .join('\n  ')
+      .join('\n    ')
 
     // if the user does not have a custom 404.md, generate the theme's default
     if (!this.context.pages.some(p => p.path === '/404.html')) {
@@ -138,14 +140,10 @@ module.exports = class Build extends EventEmitter {
     readline.cursorTo(process.stdout, 0)
     process.stdout.write(`Rendering page: ${pagePath}`)
 
-    // #565 Avoid duplicate description meta at SSR.
-    const meta = (page.frontmatter && page.frontmatter.meta || []).filter(item => item.name !== 'description')
-    const pageMeta = renderPageMeta(meta)
-
     const context = {
       url: page.path,
       userHeadTags: this.userHeadTags,
-      pageMeta,
+      pageMeta: null,
       title: 'VuePress',
       lang: 'en',
       description: '',
@@ -225,24 +223,6 @@ function renderAttrs (attrs = {}) {
   }
 }
 
-/**
- * Render meta tags
- *
- * @param {Array} meta
- * @returns {Array<string>}
- */
-
-function renderPageMeta (meta) {
-  if (!meta) return ''
-  return meta.map(m => {
-    let res = `<meta`
-    Object.keys(m).forEach(key => {
-      res += ` ${key}="${escape(m[key])}"`
-    })
-    return res + `>`
-  }).join('')
-}
-
 /**
  * find and remove empty style chunk caused by
  * https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85