support async logic inside ssr renderer
lifeart opened this issue · 1 comments
lifeart commented
it will be great to have possibility to provide kinda "waiters" to ssr render functions, to allow render some lazy-loaded components or components with async data.
awaiters could be registered on the fly, during initial rendering
renderToString(App, { awaiter } );
class App extends Component {
constructor(owner, args) {
super(owner, args);
// sync awaiter registration;
this.onComponentLoaded = this.args.awaiter.register("componentLoaded");
import('components/my-component').then((result) => {
this.componentToRender = result.default;
setTimeout(() => {
// async awaiter resolution
this.onComponentLoaded.resolve();
});
})
}
}
class App extends Component {
@tracked data;
constructor(owner, args) {
super(owner, args);
// sync awaiter registration;
this.onDataLoaded = this.args.awaiter.register("dataLoaded");
fetch('api/users').then(result => result.toJSON()).then((data) => {
this.data = data;
setTimeout(() => {
this.onDataLoaded.resolve();
});
});
}
}
renderToString
function should wait for all awaiters to be resolved before returning output
// awaiter may be an global hook, to simplify it's usage inside components
lifeart commented
looks like best way to do it, is use "Vue" way, having independent router instance, and resolve all nessesary deps before rendering.
see "addResolver" section josemarluedke/glimmer-apollo#48 (comment)