[SSR] Fake instances tree for smart prefetching

[Akryum]

I think it would be nice to have an official way of "pre-rendering" the components tree to gather prefetching data when doing SSR. Ideally much lighter than a real render, with ways to mock global/local properties and methods to speed it up, maybe with an API libraries can use to mock themselves.

This would hugely improve the SSR story because currently we are limited to the routes components. I recently made some experimentation with this in the vue-apollo SSR API that allows the user to prefetch all the GraphQL queries in his app without manually adding them if they are in rotue sub-components (or even outside of router views). However, I think it would be better as an official API so it's less exposed to breaking due to Vue internal changes.

The vue-apollo implementation also recognizes a special attribute like no-prefetch which skips a components sub-tree to optimize the tree walking if it is known that no queries will be found there.

[yyx990803]

I'm not sure if fake rendering is really a good idea. Mocking sounds super fragile and I doubt it can be really that lightweight if we want to make sure things don't just break.

Maybe we can tackle this from a different perspective - is it possible to statically analyze and extract queries at build time (kinda like Relay Modern)?

[Akryum]

Well, that's the approach taken by the official react-apollo (source). BTW it seems so much easier to do in React 😭

[yyx990803]

It looks quite fragile/hacky to me, and is essentially rendering the whole app twice... which means it decreases performance significantly... not sure if it's worth it at all.

That said it's totally possible in v3.

[yyx990803]

Also, it seems it cannot have nested components with queries. The walker stops when any component has async data. Still quite a limitation IMO.

[Akryum]

Maybe we could make renderToString asynchronous with ways to hook into it and do data prefetching and eventual secondary re-rerenders of components that prefetched some data?

[Akryum]

BTW react-apollo switched to rendering the app multiple times: apollographql/react-apollo#2533

[Akryum]

Closing in favor of #11