geelen / react-snapshot

A zero-configuration static pre-renderer for React apps
MIT License
1.66k stars 104 forks source link

Delay snapshot until redux store is re-hydrated #68

Open jasan-s opened 7 years ago

jasan-s commented 7 years ago

I am delaying my main app component render until my store is re-hydrated using redux-persist like so:

  render() {
    const {authed, emailVerified, authedId, location, rehydrationComplete} = this.props
    return (
      <div>
      { rehydrationComplete
       ? <MainContainer>
          <Switch key={location.key} location={location}>
            <Route exact={true} path='/' component={HomeContainer} />
            <Route render={() => <h2> Oops. Page not found. </h2>} />
          </Switch>
      </MainContainer>
      : <div>...Loading </div> }
      </div>
    )
  }

However , even with snapshotDelay of 8200 all the static generated html files from react-snapshot contain only ...Loading . Am I misunderstanding what snapshotDelay option does?

Can i use the Async Branch somehow?

jasan-s commented 7 years ago

I tried the following to delay React-snapshot so that it renders html after the store has been rehydrated:


import {render as snapshotRender} from 'react-snapshot'
import {ConnectedRouter} from 'react-router-redux'

async function init() {
const store = await configureStore()
snapshotRender(
  <Provider store={store}>
    {/* ConnectedRouter will use the store from Provider automatically */}
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

registerServiceWorker()
}

init()

But now get the error that 'render' from react-snapshot was never called. Did you replace the call to ReactDOM.render()? I posted it on stackoverflow as well. Essentially I need to delay the Snapshot render until my store is hydrated? @geelen Any Suggestions?