vue-meta
vue-meta copied to clipboard
nuxt
Support server-side rendering for all types of `metaInfo` properties
As far as I am aware, individual metaInfo properties can be configured to only be generated server-side, but I do not think this feature is available for all metaInfo properties.
The documentation is not clear in this regard. It treats all documented metaInfo properties the same (https://vue-meta.nuxtjs.org/api/#metainfo-properties), but it seems that this only applies to some tags.
In src/client/updaters/tag.js
/**
* Updates meta tags inside <head> and <body> on the client. Borrowed from `react-helmet`:
* https://github.com/nfl/react-helmet/blob/004d448f8de5f823d10f838b02317521180f34da/src/Helmet.js#L195-L245
*
* @param {('meta'|'base'|'link'|'style'|'script'|'noscript')} type - the name of the tag
* @param {(Array<Object>|Object)} tags - an array of tag objects or a single object in case of base
* @return {Object} - a representation of what tags changed
*/
export default function updateTag (appId, options, type, tags, head, body) {
metaInfo properties like bodyAttr do not work with once or skip. Instead, they are rendered as
<body once="true" skip="true">
client-side. I am currently looking for a solution that only server-side renders body attributes for theming reasons.
Hey, using once is not recommended because its quite broken atm and wont be fixed probably for v2, see #538
Is your attribute still a variable during SSR (ie from a query param or something) or is it just a static value from eg your build config?
Hey, using
onceis not recommended because its quite broken atm and wont be fixed probably for v2, see #538
I guess this issue really drives the point. It's a shame it won't be looked at for a while.
Is your attribute still a variable during SSR (ie from a query param or something) or is it just a static value from eg your build config?
It's a static value during build-time, but had to be changed client-side. Our final solution was to instead ignore the fact that it was static during build time and SSR it as a variable instead. We created a mixin that set the default values in head() and used it in all of our layouts. Works, but setting in SSR on all layouts is a bit overkill for a client-only theme.
@Magmagan Maybe Im not understanding you fully but Isnt this contradicting itself:
It's a static value during build-time, but had to be changed client-side
To vue-meta its either a static value that never changes (and you could use a head/metaInfo object for example) or its still a changeable variable because users can change the theme on the client (and head/metaInfo needs to a function).