glimmerjs/glimmer.js

support async logic inside ssr renderer

lifeart opened this issue · 1 comments

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

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)