From df7e1ad3a2c513b4387b043477094736c85fa5fa Mon Sep 17 00:00:00 2001 From: Pim Date: Wed, 10 Jun 2020 17:26:50 +0200 Subject: [PATCH] fix(vue-renderer): fix meta injection when ssr renderer generates a spa page (#7439) --- distributions/nuxt-start/package.json | 2 +- packages/vue-app/package.json | 2 +- packages/vue-renderer/package.json | 2 +- packages/vue-renderer/src/renderers/ssr.js | 32 ++++++++++++++-------- test/dev/basic.generate.test.js | 7 ++++- test/dev/basic.ssr.test.js | 2 +- test/e2e/basic.browser.test.js | 2 +- test/fixtures/basic/nuxt.config.js | 3 +- yarn.lock | 8 +++--- 9 files changed, 37 insertions(+), 23 deletions(-) diff --git a/distributions/nuxt-start/package.json b/distributions/nuxt-start/package.json index 3b3783a3a1..445faa8095 100644 --- a/distributions/nuxt-start/package.json +++ b/distributions/nuxt-start/package.json @@ -61,7 +61,7 @@ "node-fetch": "^2.6.0", "vue": "^2.6.11", "vue-client-only": "^2.0.0", - "vue-meta": "^2.3.4", + "vue-meta": "^2.4.0", "vue-no-ssr": "^1.1.1", "vue-router": "^3.3.2", "vuex": "^3.4.0" diff --git a/packages/vue-app/package.json b/packages/vue-app/package.json index 231564fa3f..ca28f1e339 100644 --- a/packages/vue-app/package.json +++ b/packages/vue-app/package.json @@ -16,7 +16,7 @@ "unfetch": "^4.1.0", "vue": "^2.6.11", "vue-client-only": "^2.0.0", - "vue-meta": "^2.3.4", + "vue-meta": "^2.4.0", "vue-no-ssr": "^1.1.1", "vue-router": "^3.3.2", "vue-template-compiler": "^2.6.11", diff --git a/packages/vue-renderer/package.json b/packages/vue-renderer/package.json index f8a6433884..33deeaecce 100644 --- a/packages/vue-renderer/package.json +++ b/packages/vue-renderer/package.json @@ -14,7 +14,7 @@ "fs-extra": "^8.1.0", "lru-cache": "^5.1.1", "vue": "^2.6.11", - "vue-meta": "^2.3.4", + "vue-meta": "^2.4.0", "vue-server-renderer": "^2.6.11" }, "publishConfig": { diff --git a/packages/vue-renderer/src/renderers/ssr.js b/packages/vue-renderer/src/renderers/ssr.js index e42160c2cd..b1cc532a59 100644 --- a/packages/vue-renderer/src/renderers/ssr.js +++ b/packages/vue-renderer/src/renderers/ssr.js @@ -114,7 +114,11 @@ export default class SSRRenderer extends BaseRenderer { // Inject head meta // (this is unset when features.meta is false in server template) - const meta = renderContext.meta && renderContext.meta.inject() + const meta = renderContext.meta && renderContext.meta.inject({ + isSSR: renderContext.nuxt.serverRendered, + ln: this.options.dev + }) + if (meta) { HEAD += meta.title.text() + meta.meta.text() } @@ -143,12 +147,14 @@ export default class SSRRenderer extends BaseRenderer { HEAD += renderContext.renderStyles() if (meta) { + const prependInjectorOptions = { pbody: true } + const BODY_PREPEND = - meta.meta.text({ pbody: true }) + - meta.link.text({ pbody: true }) + - meta.style.text({ pbody: true }) + - meta.script.text({ pbody: true }) + - meta.noscript.text({ pbody: true }) + meta.meta.text(prependInjectorOptions) + + meta.link.text(prependInjectorOptions) + + meta.style.text(prependInjectorOptions) + + meta.script.text(prependInjectorOptions) + + meta.noscript.text(prependInjectorOptions) if (BODY_PREPEND) { APP = `${BODY_PREPEND}${APP}` @@ -238,17 +244,19 @@ export default class SSRRenderer extends BaseRenderer { } if (meta) { + const appendInjectorOptions = { body: true } + // Append body scripts - APP += meta.meta.text({ body: true }) - APP += meta.link.text({ body: true }) - APP += meta.style.text({ body: true }) - APP += meta.script.text({ body: true }) - APP += meta.noscript.text({ body: true }) + APP += meta.meta.text(appendInjectorOptions) + APP += meta.link.text(appendInjectorOptions) + APP += meta.style.text(appendInjectorOptions) + APP += meta.script.text(appendInjectorOptions) + APP += meta.noscript.text(appendInjectorOptions) } // Template params const templateParams = { - HTML_ATTRS: meta ? meta.htmlAttrs.text(true /* addSrrAttribute */) : '', + HTML_ATTRS: meta ? meta.htmlAttrs.text(renderContext.nuxt.serverRendered /* addSrrAttribute */) : '', HEAD_ATTRS: meta ? meta.headAttrs.text() : '', BODY_ATTRS: meta ? meta.bodyAttrs.text() : '', HEAD, diff --git a/test/dev/basic.generate.test.js b/test/dev/basic.generate.test.js index 405c2dd76e..1ae5eef5c1 100644 --- a/test/dev/basic.generate.test.js +++ b/test/dev/basic.generate.test.js @@ -131,7 +131,8 @@ describe('basic generate', () => { const html = window.document.body.innerHTML const metas = window.document.getElementsByTagName('meta') expect(window.document.title).toBe('My title - Nuxt.js') - expect(metas[0].getAttribute('content')).toBe('my meta') + expect(metas[0].getAttribute('data-n-head')).toBe('ssr') + expect(metas[1].getAttribute('content')).toBe('my meta') expect(html).toContain('

I can haz meta tags

') }) @@ -195,6 +196,10 @@ describe('basic generate', () => { test('/redirect should not be server-rendered', async () => { const { body: html } = await rp(url('/redirect')) expect(html).toContain('
') + + // vue-meta should also not indicate ssr + expect(html).toContain('') + expect(html).toContain('') }) test('/redirect -> check redirected source', async () => { diff --git a/test/dev/basic.ssr.test.js b/test/dev/basic.ssr.test.js index 61b7cdef2d..328ac3337a 100644 --- a/test/dev/basic.ssr.test.js +++ b/test/dev/basic.ssr.test.js @@ -87,7 +87,7 @@ describe('basic ssr', () => { expect(html).toContain('