Skip to content

Commit 1eeef40

Browse files
authored
Merge pull request #580 from rondale-sc/utilize-rehydration-serialization-from-glimmer
Utilize rehydration serialization from glimmer
2 parents d79d2d5 + dc53d0d commit 1eeef40

5 files changed

Lines changed: 71 additions & 4 deletions

File tree

README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -399,6 +399,43 @@ export default Ember.Route.extend({
399399
```
400400
And they still take advantage of caching in the `shoebox`. No more redundant AJAX for already acquired data. Installation details are available in the addon [README](https://github.com/appchance/ember-cached-shoe#ember-cached-shoe).
401401

402+
### Rehydration
403+
404+
What is Rehydration?
405+
406+
The rehydration feature means that the Glimmer VM can take a DOM tree
407+
created using Server Side Rendering (SSR) and use it as the starting
408+
point for the append pass.
409+
410+
See details here:
411+
412+
https://github.com/glimmerjs/glimmer-vm/commit/316805b9175e01698120b9566ec51c88d075026a
413+
414+
In order to utilize rehydration in Ember.js applications we need to ensure that
415+
both server side renderers (like fastboot) properly encode the DOM they send to
416+
the browser with the serialization format (introduced in the commit above) AND
417+
that the browser instantiated Ember.js application knows to use the rehydration
418+
builder to consume that DOM.
419+
420+
Rehydration is 100% opt-in, if you do not specify the environment flag your
421+
application will behave as it did before!
422+
423+
We can opt-in to the rehydration filter by setting the following environment
424+
flag:
425+
426+
```
427+
EXPERIMENTAL_RENDER_MODE_SERIALIZE=true
428+
```
429+
430+
This flag is read by Ember CLI Fastboot's dependency; fastboot to alert it to
431+
produce DOM with the glimmer-vm's serialization element builder. This addon
432+
(Ember CLI Fastboot) then uses a utility function from glimmer-vm that allows
433+
it to know whether or not the DOM it received in the browser side was generated
434+
by the serialization builder. If it was, it tells the Ember.js Application to
435+
use the rehydration builder and your application will be using rehydration.
436+
437+
Rehydration is only compatible with fastboot > 1.1.4-beta.1, and Ember.js > 3.2.
438+
402439
## Build Hooks for FastBoot
403440

404441
### Disabling incompatible dependencies

index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ module.exports = {
5858
app.options.fingerprint.generateAssetMap = true;
5959
}
6060

61+
app.import('vendor/experimental-render-mode-rehydrate.js');
6162
// get the app registry object and app name so that we can build the fastboot
6263
// tree
6364
this._appRegistry = app.registry;

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"ember-cli-lodash-subset": "2.0.1",
3030
"ember-cli-preprocess-registry": "^3.1.0",
3131
"ember-cli-version-checker": "^2.1.0",
32-
"fastboot": "^1.1.3",
32+
"fastboot": "^1.1.4-beta.1",
3333
"fastboot-express-middleware": "^1.1.0",
3434
"fastboot-transform": "^0.1.2",
3535
"fs-extra": "^4.0.2",
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function() {
2+
if (typeof FastBoot === 'undefined') {
3+
var current = document.getElementById('fastboot-body-start');
4+
5+
if (
6+
current &&
7+
typeof Ember.ViewUtils.isSerializationFirstNode === 'function' &&
8+
Ember.ViewUtils.isSerializationFirstNode(current.nextSibling)
9+
) {
10+
Ember.ApplicationInstance.reopen({
11+
_bootSync: function(options) {
12+
if (options === undefined) {
13+
options = {
14+
_renderMode: 'rehydrate'
15+
};
16+
}
17+
18+
return this._super(options);
19+
}
20+
});
21+
22+
// Prevent clearRender by removing `fastboot-body-start` which is already
23+
// guarded for
24+
current.parentNode.removeChild(current);
25+
var end = document.getElementById('fastboot-body-end');
26+
end.parentNode.removeChild(end);
27+
}
28+
}
29+
})();

yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2869,9 +2869,9 @@ fastboot@^1.1.2:
28692869
simple-dom "^1.0.0"
28702870
source-map-support "^0.5.0"
28712871

2872-
fastboot@^1.1.3:
2873-
version "1.1.3"
2874-
resolved "https://registry.yarnpkg.com/fastboot/-/fastboot-1.1.3.tgz#56c5f56415c5ae8de2db539c0d3ecbcd65538f8b"
2872+
fastboot@^1.1.4-beta.1:
2873+
version "1.1.4-beta.1"
2874+
resolved "https://registry.yarnpkg.com/fastboot/-/fastboot-1.1.4-beta.1.tgz#860f8af2bd032b3a7477fdf6e1a64b034a02829f"
28752875
dependencies:
28762876
chalk "^2.0.1"
28772877
cookie "^0.3.1"

0 commit comments

Comments
 (0)