So you setup fastboot on your ember app. Now you are rendering your application on the server, making search engines happy. Things are great. But now you have a new problem. The app on the server will fetch your data from your API to render, then on the client side the data is fetched again, even though we already rendered the data with fastboot. How can our apps be smarter about this and not render the same data twice, being inefficient and making for bad UX.
flashing screen
If you work with fastboot you may have seen this issue. Your app renders, then your loading template flashes, and your app renders one more time.
What is happening is:
- fastboot serves your rendered HTML
- ember data makes another, likely redundant request, for the same data, flashing the loading template if you have one
- this request finishes and your app renders a final time
Fastboot provides a solution for this called the “shoebox”. It is basically some json rendered in the HTML response from fastboot in a script tag. You can code your app to account for this and use the cache instead of making a duplicate request on the client.
However managing this all yourself can become complicated. Luckily some addons have come about to encapsulate common patterns.
ember-cached-shoe
The ember-cached-shoe addon is recommended on the fastboot page, and the first one I tried. It was certainly easier than working with the shoebox directly, and provides a nice API. There are still some other issues even if you use this, which the library below addresses quite well.
ember-data-storefront
The ember-data-storefront addon is not just a solution for the shoebox, but also claims to solve many other common ember data issues.
Learn more by watching this talk.
This really blow my mind. I encountered the isuses described in the talk often, but never thought they could be solved in this way. I hope these patterns get merged into ember itself eventually, since they seem to be so common.
All you have to do to use it with fastboot is add the mixin to your application adapter:
// app/adpaters/application.js
import JSONAPIAdapter from 'ember-data/adapters/json-api';
import FastbootAdapter from 'ember-data-storefront/mixins/fastboot-adapter';
export default JSONAPIAdapter.extend(
FastbootAdapter, {
// ...
});
Be sure to check out the rest of the docs as it covers lots of ember data loading issues, unrelated to fastboot, but may nevertheless improve your application.
Rehydration
Rehydration is an experimental feature that may render the above methods for dealing with the shoebox obselete. I haven’t tried to yet, but follow the above link if you are interested in trying it out.