[SSR] Scoped-Mixed SSR Hydration for specific components

[ghost]

What problem does this feature solve?

Take a look at these snippets:

//Blade
<div id="app">
    <div>Some contents</div>
    <component1></component1>
    <component2></component2>
    @bladedirective
    <div>something else</div>
    <div is=component3>{{ $myComponentHtmlFromSSR }}</div>
</div>

//Client
const app = new Vue({
    el: '#app',
    components: { Component1, Component2, Component3}
});

//Server
const app = new Vue({
    render: h => h(Component3),
});
//Process app with vue-server-renderer

This works, we've used the common Blade + Vue dom templating approach and for some components, we will use SSR with its benefits.

The issue here is that the HTML snippet got from server can't be hydrated because the entire #app was not hydrated and Vue through client always regenerate the component from scratch.

What does the proposed API look like?

Vue should have a "scoped" or "mixed" hydration for components in a way that we can use SSR with a mixed approach of Vue and other templating techniques and then hydrate a specific component and not an entire app.

Maybe something similar to: <div is="component3" hydrate="true">{{ $myComponentHtmlFromSSR }}</div>

[AlbertMarashi]

I think Vue should have a feature that allows certain components to be server-side hydrated, like <myComponent hydrate></myComponent> that allows developers to selectively hydrate specific components instead of hydrating an entire app.

[justrhysism]

Also, it would be nice if the pre-hydrated SSR markup was removed from the app (JS) bundle entirely reducing payload.

[Nettsentrisk]

There definitely needs to be a way to selectively tell the Vue app which components need to be hydrated.

Let's say you build your web site using Vue components and SSR. Many/most of your components will be "static", that is, they will not be reacting to user input or anything happening on the client, their only purpose is to produce HTML.

There doesn't seem to be a way of preventing hydrating every single component in the Vue app with the existing options, you either hydrate the whole thing, or nothing.

If there's a way to do this with the current API, I would love to see an example!

Otherwise, maybe a "static" property on a component can let Vue know that this component will only be rendered server-side, or when hydration is turned off at the app-level, that you have to have a hydrate option per component/instance to tell the app to hydrate that componeny on the client.

[ghost]

News about that?