Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ember-fastboot support #36

Open
HarenBroog opened this issue Sep 21, 2017 · 1 comment
Open

ember-fastboot support #36

HarenBroog opened this issue Sep 21, 2017 · 1 comment

Comments

@HarenBroog
Copy link

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? :)

@CvX
Copy link

CvX commented Oct 20, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants