ember-parachute icon indicating copy to clipboard operation
ember-parachute copied to clipboard

ember-fastboot support

Open HarenBroog opened this issue 6 years ago • 1 comments

Hello,

I have found this add-on very interesting - great job :) However, I wanted to ask If you are planning any support of ember-fastboot. Server-side prerendering is a must have for many apps, so giving it up completely is impossible for me.

Non-blocking UI is a good thing, but fetching all data in controller actually makes ember-fastboot impossible to work (as it renders blank/skeleton page to web crawlers).

What do you think @offirgolan? :)

HarenBroog avatar Sep 21 '17 13:09 HarenBroog

The way to handle this is described in the FastBoot documentation: delaying-the-server-response

If we take the example from the ember-parachute README, integration with FastBoot could be implemented like this:

import Route from '@ember/routing/route';
import { inject } from '@ember/service';
import RSVP from 'rsvp';

export default Route.extend({
  fastboot: inject(),

  afterModel() {
    if (typeof FastBoot !== 'undefined') {
      const defer = RSVP.defer();
      this.controllerFor('posts').set('deferredRender', defer);
      this.get('fastboot').deferRendering(defer.promise);
    }
  },
});
import Controller from '@ember/controller';
import QueryParams from 'ember-parachute';

const myQueryParams = new QueryParams({…});

export default Controller.extend(myQueryParams.Mixin, {
  setup({ queryParams }) {
    this.fetchData(queryParams).catch((error) => {
      if (typeof FastBoot !== 'undefined') {
        this.get('deferredRender').reject();
        throw error;
      }
    });
  },

  queryParamsDidChange({ shouldRefresh, queryParams }) {
    if (shouldRefresh) {
      this.fetchData(queryParams).catch((error) => {
        if (typeof FastBoot !== 'undefined') {
          this.get('deferredRender').reject();
          throw error;
        }
      });
    }
  },

  async fetchData(queryParams) {
    // fetch some data, e.g.
    // let posts = await this.get('store').query('post', queryParams);
    // this.set('posts', posts);

    if (typeof FastBoot !== 'undefined') {
      this.get('deferredRender').resolve();
    }
  },
}

Question is: how can we make it easier for users to integrate with FastBoot?

First, we should add an example to the README.

But would it be possible to somehow automate that integration? Most likely not without changing this addon's API, since ember-parachute doesn't handle any data fetching on its own.

CvX avatar Oct 20 '17 11:10 CvX