Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
stereobooster committed Jan 6, 2018
1 parent b189d8f commit e39526f
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,24 @@ Example: [Switch from prerender-spa-plugin to react-snap](https://github.com/ste

### Caveats

- Only works with routing strategies using the HTML5 history API. No hash(bang) URLs.
- **Vue 1.x**: Make sure to use [`replace: false`](http://vuejs.org/api/#replace) for root components
Only works with routing strategies using the HTML5 history API. No hash(bang) URLs.

Vue uses `data-server-rendered` attribute on the root element to mark SSR generated markup. When this attribute is present VDOM rehydrates instead of rendering all from scratch, which can result in a flash.

This is the small hack to fix rehydration problem.

```js
window.snapSaveState = () => {
rootElement.setAttribute('data-server-rendered', 'true')
return {};
};
```

`window.snapSaveState` is a callback to save a state of the application at the end of rendering. It can be used for Redux or async components. In this example it is repurposed to change DOM, this is why I call it "hack". Maybe in future versions of `react-snap` I will come up with better abstractions or automate this process.

### Vue 1.x

Make sure to use [`replace: false`](https://v1.vuejs.org/api/#replace) for root components

## ✨ Examples

Expand Down

0 comments on commit e39526f

Please sign in to comment.