Partially hydrate a SSR VUE app

1
votes

We are building a website that—to our all sorrow—has a lot of advertisements. Now we wanna use VUE to build the website, do server side rendering and hydrate the website in the client.

The problem is that the advertisements can basically do anything. Ie. change the background image, inject stuff in the dom, etc. pp.

So the the strategy we want to implement is to render the site in the server and only hydrate specific parts of the website, i.e. specific components with VUE, leaving the rest to the site to the advertisements.

Is that possible with VUE?

edit to clarify: The problem ist that if we hydrate the entire site VUE will clash with things the ads have changed in the site. That is why we want to hydrate specific components in the site only.

1
vue.jsvuejs2server-side-rendering
I don't think this is is an SSR related issue. From how I see it you can easily just render the entire website on your server, send it to the client and then execute the javascript that will pop in those ads. I don't see any difference to advertising a normal website, the only thing you have to take care of is that vue doesn't change those backgrounds back to normal in runtime. – Philip Feldmann
That is exactly what I was saying, the ads will clash with a fully hydrated site. I.e. the strategy is to only hydrate parts of the site. – Lukas
I updated my question to clarify the problem – Lukas
What's the deal with the ads overwriting certain styles on runtime (e.g. background images) ? I don't really see how your strategy of only rendering a few components is supposed to help. – Philip Feldmann
Because you can control which parts of the site VUE handles and avoid conflicts with the things ads do – Lukas

1 Answers

1
votes

Late answer but perhaps the Vue Quench library offers some functionality you're looking for. This presentation from the creator details how their team runs a sports website composed of 4 smaller hydrated Vue components based on static HTML markup.

A strategy such as this allows a coexistence of both a Vue app (or multiple Vue instances) alongside the advertisement content you're required to embed.