Avoid FOUC with FastBoot #16
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alexlafroscia
force-pushed
the
fastboot-integration
branch
from
149a69d to
10ad743
Compare
We don’t care about these errors, because all it means is that the stylesheet is not defined. We can just return the default empty object in those cases. Other errors, however, we want to surface. This came up when `emotion` was throwing an error about needing access to the document.
Emotion 9 will be required for Fastboot support, because it will include the PR that I made to get around the document/window issue
alexlafroscia
force-pushed
the
fastboot-integration
branch
from
0b6e751 to
250342d
Compare
|
Punting on tests due to this issue: tomdale/ember-cli-addon-tests#157 I can't run the generator for an addon test because I overwrite the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Without explicit FastBoot support, the content would come down rendered from the server but no styles would be present yet. This caused an issue called "flash of unstyled content", or FOUC, that is common with server-side-rendered JavaScript apps that use CSS-in-JS solutions.
This PR introduces proper FastBoot support. The styles required for the initial render are computed on the server and baked into the initial payload, so that they're ready when the content is rendered by the browser.
emotionis also "hydrated" with these styles, so that it avoids injecting them into the page a second time.The technical approach to these things leans heavily on the patterns established by the first-party React SSR support, so I feel confident that I'm not using APIs that will break in the near future.
Additionally,
emotionhas an issue with the FastBoot environment that I landed emotion-js/emotion#550 to fix. This PR (once merged) will reference a version ofemotionthat includes that change.TODOs
emotionversion9.0.0-3(or later)Closes #2