Deferred promise does not fire on the client-side when in server-rendering mode #72
Description
Hey @sars, this async project works really well, easy to understand and integrate, especially the new deferred vs not-deferred logic
Thought I'd report this slight issue
First point to note, this is not an issue when using client-side navigation
It only becomes a problem on the initial server-side page request
I have a page, where I want the server to render 20% (fast) of an object and leave the client to fetch the other 80% (slow)
20% of the object is enough to push out the SEO tags
asyncConnect is setup like this:
const AsyncConnectedUserView = asyncConnect([{
deferred: false,
promise: ({store: {dispatch, getState}, params: {id}}) => {
return Promise.resolve(dispatch(fetchShallowUserThunk(dispatch, id)));
}
}, {
deferred: true,
promise: ({store: {dispatch, getState}, params: {id}}) => {
return Promise.resolve(dispatch(fetchDeepUserThunk(dispatch, id)));
}
}])(ConnectedUserView)
And the server bindings: (a bit messy as using TS with no spread, and #55 (comment))
var cloned = {};
for(var i in renderProps) {
cloned[i] = renderProps[i];
}
cloned["store"] = store;
cloned["filter"] = (item) => {
return !item.deferred
};
loadOnServer(cloned).then(() => {
const appHTML = renderToString(
<Provider store={store} key="provider">
<ReduxAsyncConnect {...renderProps} />
</Provider>
)
And client bindings:
<Provider store={store} key="provider">
<Router history={history} children={routes} render={(props) =>
<ReduxAsyncConnect {...props} />
} />
</Provider>
The problem I have, is that I would expect that on server render, the server waits for fetchShallowUserThunk (which it does)
And then the client should trigger fetchDeepUserThunk (which it doesn't)
It is like the [deferred: true] flag does not do anything
I can work around this by doing something like this
class UserView extends React.Component<IProps, any> {
componentDidMount() {
this.props.dispatch(fetchDeepUserThunk(this.props.dispatch, this.props.params.id));
}
}
Though, that's not ideal as I multiple calls to fetchDeepUserThunk
Have I missed something?
Cheers