Vue hydration of pre-rendered html: How to mark as static in order to avoid mismatches

163 views Asked by At

I have an SPA, built with vue-cli 3. Some views will be served pre-rendered (SSG) using the npm package prerender-spa-plugin; its option postProcess is used to add data-server-rendered to the element the vue app will mount to.

During pre-rendering (via Puppeteer renderer) some elements will receive a style attribute with a value from an async process (need to request some color information of an image from cdn).

The problem: When the vue app is trying to hydrate the static pre-rendered html there will be a mismatch (between virtual DOM and the pre-rendered markup): During hydration the style attribute hasn't been set yet. Is there a way to "tell" Vue to accept this mismatch and take the style attribute and its value as static and just ignore it?

I know we could inject the style attribute's value into the pre-rendered html, but this is no option for us for several reasons (we don't have the possibility to do this dynamically).

0

There are 0 answers