feat(vue-renderer): support prepend/append body tags during ssr for all allowed tag types

[pimlie]

This is a draft until #6121 is merged

Resolves: #6097

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

According to the html5 specs both meta, link, style, script as noscripts are allowed in the body. This was already support by VueMeta (thus Nuxt) on the client, but during SSR it wasnt yet.

Note, some tags are only allowed with certain attributes. Eg link must have a itemprop attribute, a link with a rel attribute is not allowed in the body. Its up to the user to use this features according to the spec.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #6134 into dev will decrease coverage by 0.02%.
The diff coverage is 92.85%.

@@            Coverage Diff             @@
##              dev    #6134      +/-   ##
==========================================
- Coverage   95.75%   95.72%   -0.03%     
==========================================
  Files          80       80              
  Lines        2660     2666       +6     
  Branches      684      687       +3     
==========================================
+ Hits         2547     2552       +5     
- Misses         97       98       +1     
  Partials       16       16

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.63% <7.14%> (-0.12%)	⬇️
#unit	92.42% <92.85%> (-0.03%)	⬇️

Impacted Files	Coverage Δ
packages/vue-renderer/src/renderers/spa.js	87.69% <100%> (ø)	⬆️
packages/vue-renderer/src/renderers/ssr.js	93.65% <83.33%> (-1.09%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f65c72d...220dd1f. Read the comment docs.

[pimlie]

@clarkdo @pi0 Do you have any idea why the SPARenderer is being loaded on mode: 'ssr' ?

The basic.test fails at the moment due to my latest commit. The basic fixture is not a SPA build but the SPARendered is still being initiailzed. Because the SPARenderer is initialized before the SSR/ModernRenderer, VueMeta is loaded on the server but with the wrong config. Subsequent loads of VueMeta within the SSR App are ofc ignored because VueMeta is already loaded.

[clarkdo]

It makes switch SPA and SSR at runtime possible.

About the error does vue-meta store mode for different logic?

If so I think the mode should be passed in vue-meta initializing instead of module loading and can be changed at runtime since mode can be changed as well.

[pimlie]

Yes, it uses the plugin options throughout its lifetime.

I have reverted the last commit as that wont ever work probably until v3. I either need to add support to VueMeta to make it possible to override options on calling vm.$meta.inject or Nuxt should do a search and replace in the SPA renderer. Both are not ideal ofc but probably the first is a bit cleaner.

Or maybe you have other/better suggestions?

[clarkdo]

I think you can check the mode config when passing ssrAppId and only do it when the value is spa, is that ok?

[pimlie]

That would only be a partial fix I believe. Eg if somebody would switch during runtime from SSR to SPA then their SPA pages would still be generated with the wrong app id.

-- edit --
Maybe we should re-visit this issue so VueMeta supports rendering without Vue. Then we dont have to do that dirty trick in the SPARendered anymore either to get the metaInfo stuff (ping @manniL)

[clarkdo]

@pimlie I think swiching at runtime will re-run vue.use(VueMeata)

[pimlie]

I have added support to VueMeta for directly generating tags from a metaInfo object. This means this PR is depending on #6153 for VueMeta v2.2

Creating the tags renderer (the object containing all the meta.text() stuff) is now at least two times faster for SPA mode. Before it took ~8-12ms, now it takes ~4-5ms

[Atinux]

Before it took ~8-12ms, now it takes ~4-5ms

🔥