search

nuxt / vue-meta

Manage HTML metadata in Vue.js components with SSR support
https://vue-meta.nuxtjs.org
Other
4.08k stars 247 forks source link

Support server-side rendering for all types of `metaInfo` properties #584

Open alexlalves opened 4 years ago

alexlalves commented 4 years ago

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.

pimlie commented 4 years ago

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?

alexlalves commented 4 years ago

Hey, using once is 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.

pimlie commented 4 years ago

@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).