const withHelmet = (App: any, props: any) => { const sheet = new ServerStyleSheet() const body = renderToString(sheet.collectStyles(<App {...props} />)) const styles = sheet.getStyleTags() const helmet = Helmet.renderStatic() const title = helmet.title.toString() const meta = helmet.meta.toString() return template({ title, styles, body, meta }) }
export default function renderHtmlPage(store, html = '') { const head = Helmet.rewind(); const assets = global.webpackIsomorphicTools.assets(); let page = `<!DOCTYPE html><html ${head.htmlAttributes.toString()}>`; page += '<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">'; page += '<meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">'; page += head.base.toString() + head.title.toString() + head.meta.toString() + head.link.toString(); page += Object.keys(assets.styles).map(style => `<link href="${assets.styles[style]}" rel="stylesheet" type="text/css">` ).join(''); page += `</head><body><div id="app"><div>${html}</div></div>`; if (store) { page += `<script type="text/javascript">window.__INITIAL_STATE__=${serialize(store.getState())}</script>`; } page += Object.keys(assets.javascript).reverse().map(script => `<script src="${assets.javascript[script]}"></script>` ).join(''); page += head.script.toString(); page += '</body></html>'; return page; }
const getHTML = (markup, initialState, styleTags) => { const helmet = Helmet.renderStatic(); return ( ` <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> ${helmet.title.toString()} ${helmet.meta.toString()} ${helmet.link.toString()} <script src="/client.js" defer></script> <script> window.__INITIAL_STATE__ = ${serialize(initialState)} </script> ${styleTags} </head> <body> <div id="app">${markup}</div> </body> </html> ` ); }
const cssString = sheets.toString(); const helmet = Helmet.renderStatic(); <html> <head> ${helmet.title.toString()} ${helmet.meta.toString()} <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
executePostCss(css) .then(css => { const helmet = Helmet.renderStatic(); head.push(helmet.title.toString()); head.push(helmet.meta.toString()); head.push(helmet.link.toString()); head.push(`<style id="jss-server-side">${css}</style></head>`); htmlAttributes: helmet.htmlAttributes.toString(), bodyAttributes: helmet.bodyAttributes.toString(), head: head.join(''), jsBeforeMainScript: extraChunks.join(''),
<html ${helmet.htmlAttributes.toString()}> <head> ${helmet.title.toString()} ${helmet.meta.toString()} ${helmet.link.toString()} ${helmet.script.toString()} ${helmet.noscript.toString()} ${sheet.getStyleTags()} ${gtagInit()} </head> <body ${helmet.bodyAttributes.toString()}> <div id="root">${content}</div>
app.get('*', (req, res) => { const context = {}; const content = ReactDOMServer.renderToString( <StaticRouter location={req.url} context={context}> <App /> </StaticRouter>, ); const helmet = Helmet.renderStatic(); const html = ` <html> <head> ${helmet.title.toString()} ${helmet.meta.toString()} <script src="client_bundle.js" defer></script> <script>window.__INITIAL_DATA__ = undefined;</script> </head> <body> <div id="root">${content}</div> </body> </html> `; res.send(html); });