static async getInitialProps (...args) { const documentProps = await super.getInitialProps(...args) return { ...documentProps, helmet: Helmet.renderStatic() } }
function render(currentModule, state, res) { const Module = components[currentModule]; const store = createStore(Reducer, state); const context = {}; const html = renderToString( <Provider store={store}> <Module /> </Provider> ); const finalState = store.getState(); const initial = JSON.stringify(finalState).replace(/</g, '\\u003c'); const helmet = Helmet.renderStatic(); return res.send(page(helmet, html, initial, JSON.stringify(currentModule))); }
const renderer = (req, store) => { const sheetsRegistry = new SheetsRegistry(); const jss = create(preset()); const generateClassName = createGenerateClassName(); const context = {} const helmet = Helmet.renderStatic() const content = renderToString( <JssProvider registry={sheetsRegistry} jss={jss} generateClassName={generateClassName}> <MuiThemeProvider theme={theme} sheetsManager={new Map()}> <Provider store={store}> <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> </Provider> </MuiThemeProvider> </JssProvider> ) const css = sheetsRegistry.toString() return `<!doctype html>\n${renderToString(Html({content, css, store}))}` }
router.get("/*", (req, res) => { const context = {}; // context is used for tracking potential redirects while rendering the React DOM. T // his needs to be handled with a 3XX response from the server. const store = createStore(); store.dispatch(initializeSession()); const jsx = ( <ReduxProvider store={ store }> <StaticRouter context={ context } location={ req.url }> <Layout /> </StaticRouter> </ReduxProvider> ); const reduxState = store.getState(); const reactDom = renderToString(jsx, reduxState); const helmetData = Helmet.renderStatic(); res.writeHead(200, { "Content-Type": "text/html" }); res.end(htmlTemplate(reactDom, reduxState, helmetData)); });
const Html = ({ content, css, store }) => { const helmet = Helmet.renderStatic() const state = `window.__INITIAL_STATE__ = ${serialize(store.getState())}` return ( <html> <head> {helmet.title.toComponent()} {helmet.meta.toComponent()} <style> {'*, *:after, *:before { box-sizing: border-box; }'} {'html, body, main { height: 100%;position: relative;}'} {'body {margin: 0; overflow: hidden; font-family: Roboto, sans-serif; background-color: #FAFAFA}'} </style> <style id="jss-server-side">{css}</style> {helmet.link.toComponent()} </head> <body> <div id="root" dangerouslySetInnerHTML={{ __html: content }} /> <script dangerouslySetInnerHTML={{ __html: state }} /> <script src="bundle.js"></script> </body> </html> ) }
const helmet = Helmet.renderStatic();
render () { const { assets, content, state } = this.props const head = Helmet.renderStatic() return ( <html lang='en-us'> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} <link rel='shortcut icon' href='/favicon.ico' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> {process.env.NODE_ENV !== 'development' && <link href={`/static/assets${assets['main.css']}`} rel='stylesheet' /> } </head> <body> <div id='root' dangerouslySetInnerHTML={{ __html: content }} /> <script dangerouslySetInnerHTML={{ __html: `window.__data=${state}` }} charSet='UTF-8' /> <script src={process.env.NODE_ENV === 'development' ? `${assets['main.js']}` : `/static/assets${assets['main.js']}`} defer /> </body> </html> ) }
app.use('/', (req, res) => { const state = { title: 'Page title', text: 'Server side text' }; const store = createStore(Reducer, state); const context = {}; const html = renderToString( <StaticRouter location={req.url} context={context}> <Provider store={store}> <AppRoutes location={req.url} /> </Provider> </StaticRouter> ); const finalState = store.getState(); const initial = JSON.stringify(finalState).replace(/</g, '\\u003c'); const helmet = Helmet.renderStatic(); return res.send(page(helmet, html, initial)); });
static getInitialProps({ renderPage, req }) { const { html, head, errorHtml, chunks } = renderPage(); const helmet = Helmet.renderStatic(); return { html, head, errorHtml, chunks, helmet } }
executePostCss(css) .then(css => { const helmet = Helmet.renderStatic(); head.push(helmet.title.toString()); head.push(helmet.meta.toString());
const helmet = Helmet.renderStatic();
); const helmetData = Helmet.renderStatic();
const helmet = Helmet.renderStatic();
const helmet = Helmet.renderStatic(); const initialState = apolloClient.extract();
const helmetData = helmet.renderStatic();