const reRenderApp = () => { try { renderApp(); } catch (error) { hydrate(<RedBox error={error} />, mountNode); } }
loadComponents().then( () => { hydrate( <BrowserRouter> <AppRouter loadableState={ loadableState } /> </BrowserRouter> , document ) } )
const render = (Root) => { hydrate( <Provider store={store}> <BrowserRouter> <Root /> </BrowserRouter> </Provider>, document.getElementById('app') ); }
module.hot.accept('./App', () => { const NewApp = require('./App').default Loadable.preloadReady().then(() => { hydrate( <BrowserRouter> <NewApp /> </BrowserRouter>, document.getElementById('root') ) }) })
Meteor.startup(() => { const target = document.getElementById('react-root'); const app = ( <ThemeProvider theme={{}}> <ApolloProvider client={apolloClient}> <GlobalStyle /> <BrowserRouter> <Switch> <App /> </Switch> </BrowserRouter> </ApolloProvider> </ThemeProvider> ); return !window.noSSR ? hydrate(app, target) : render(app, target); });
match({ history, routes }, (error, redirectLocation, renderProps) => { if(error) { //postBrowserError({error, stack, source, errorInfo, page, url, options, screenshot}) store.dispatch(postBrowserError({error: error.message, stack: error.stack, url: window.location.url, source:'scrape-react-router-client'})); render(<EmptyContainer><EmptySection text="Something went wrong. We are trying to fix it." /></EmptyContainer>, document.getElementById('scrape-container')); } else if (redirectLocation) { window.location.href= (redirectLocation.pathname + redirectLocation.search) || '/'; } else if (renderProps) { hydrate( <Provider store={store}> <Router {...renderProps} onUpdate={onUpdate} history={history}> </Router> </Provider>, document.getElementById('scrape-container')); } else { } });
const renderApp = () => { const App = require('./containers/App').default; hydrate( <AppContainer errorReporter={({ error }) => <RedBox error={error} />}> <Provider store={store}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider> </AppContainer>, mountNode, ); }
Meteor.startup(() => { // eslint-disable-next-line const preloadedState = EJSON.fromJSONValue(window.__PRELOADED_STATE__) // eslint-disable-next-line delete window.__PRELOADED_STATE__ // eslint-disable-next-line const messages = window.__MESSAGES__ // eslint-disable-next-line delete window.__MESSAGES__ // eslint-disable-next-line const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose const middleware = composeEnhancers(applyMiddleware(thunk)) const store: Store<State> = createStore(reducer(), preloadedState, middleware) const app = document.getElementById('app') if (app) { hydrate(<AppWrap store={store} />, app) } })
const render = Component => { hydrate(<Component />, document.querySelector('#react-root')); }
loadableReady(() => { // createBlockingRoot( // document.getElementById('root') // , { hydrate: true } // ).render( // <BrowserRouter> // <App /> // </BrowserRouter> // ) hydrate( <BrowserRouter> <Suspense fallback={<h1>Loading...</h1>}> <App /> </Suspense> </BrowserRouter>, document.getElementById('root') ); if (module.hot) { module.hot.accept(); } })
function renderApp(App) { const app = ( <ReactHotLoader> <Provider store={store}> <BrowserRouter forceRefresh={!supportsHistory}> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </BrowserRouter> </Provider> </ReactHotLoader> ) hydrate(app, container) }
// If we're running in production, we use hydrate to get fast page loads by just // attaching event listeners after the initial render Loadable.preloadReady().then(() => { hydrate(Application, root); });
hydrate( <Provider store={store}> <MuiThemeProvider sheetsManager={sheetsManager} theme={theme}> <BrowserRouter>{renderRoutes(routes)}</BrowserRouter> </MuiThemeProvider> </Provider>, document.getElementById('root'), () => { // [ReHydratation](https://github.com/cssinjs/jss/blob/master/docs/ssr.md) const jssStyles = document.getElementById('jss-ssr'); if (jssStyles && jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles); } );
async function clientRender() { await Loadable.preloadReady(); hydrate( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); }
Loadable.preloadReady().then(() => { hydrate( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ) })