erikras / erikras/react-redux-universal-hot-example

Dummy @asyncConnect is required for server side rendering to work

Open
#1,078 6 comments 7 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

I've encountered a rather puzzling issue today, when a page reload yielded:

> Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

Typically, when there's a difference between CSR and SSR, a short snippet of conflicting markup is shown, but not this time. As it happens, I have been heavily experimenting with client-side optimizations, so it took me quite a while to figure out none of that was at fault.

After substantial amount of hair pulling I've managed to narrow down the issue to the following fact that can be easily reproduced on the master branch: **if none of the rendered components for the current route contain the `@asyncConnect` decorator, then SSR fails and you get the misleading message.**

For now, I've worked around this issue in my project by defining a dummy `@asyncConnect` on my topmost component:

``` js
import React, { Component } from 'react';
import { asyncConnect } from 'redux-async-connect';

@asyncConnect([{
promise: () => Promise.resolve()
}])
export default class App // ...
```

```
Node v4.3.1
Npm 2.14.12
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.