loadInitialProps(this.props.routes, pathname, { history: this.props.history, }) .then(({ data }) => { this.prefetcherCache = { ...this.prefetcherCache, [pathname]: data, }; }) .catch((e) => console.log(e));
asyncComponent({ loader: () => import('./screens/Home'), Placeholder, })
(async () => { const data = await ensureReady(routes); const client = createApolloClient({ initialState: window.__APOLLO_STATE__ }); const App = () => ( <BrowserRouter> <ApolloProvider client={client}> <ThemeProvider theme={theme}> <AfterWithTransition data={data} routes={routes} /> </ThemeProvider> </ApolloProvider> </BrowserRouter> ); AppRegistry.registerComponent('App', () => App); AppRegistry.runApplication('App', { initialProps: {}, rootTag: document.getElementById('root') }); })();
// only runs clizzient UNSAFE_componentWillReceiveProps(nextProps) { const navigated = nextProps.location !== this.props.location; if (navigated) { window.scrollTo(0, 0); // save the location so we can render the old screen this.setState({ previousLocation: this.props.location, data: undefined, // unless you want to keep it }); const { data, match, routes, history, location, ...rest } = nextProps; loadInitialProps(this.props.routes, nextProps.location.pathname, { location: nextProps.location, history: nextProps.history, ...rest, }) .then(({ data }) => { this.setState({ previousLocation: null, data }); }) .catch((e) => { // @todo we should more cleverly handle errors??? console.log(e); }); } }
const html = await render({ req, res,
render() { const { helmet, assets, data, styleElement, apolloState } = this.props; // get attributes from React Helmet const htmlAttrs = helmet.htmlAttributes.toComponent(); const bodyAttrs = helmet.bodyAttributes.toComponent(); // set server apollo state const serializedApolloState = (JSON.stringify(apolloState) || '').replace(/</g, '\\u003c'); const setApolloStateScript = `window.__APOLLO_STATE__ = ${serializedApolloState};`; return ( <html {...htmlAttrs}> <head> <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Cinuru</title> {helmet.title.toComponent()} {helmet.meta.toComponent()} {helmet.link.toComponent()} <style>{globalCss}</style> {styleElement} <script dangerouslySetInnerHTML={{ __html: setApolloStateScript }} /> </head> <body {...bodyAttrs}> <AfterRoot /> <AfterData data={data} /> <script type="text/javascript" src={assets.client.js} defer crossOrigin="anonymous" /> </body> </html> ); }
asyncComponent({ loader: () => import('./screens/About'), Placeholder, })