} else { const helmet = Helmet.renderStatic()
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 }) }
function requesthandler (req, res) { let body = renderToString( <StaticRouter location={req.path} context={{}}> {renderRoutes(Routes) } </StaticRouter>) const helmet = Helmet.renderStatic() res.send(template({body, helmet})) }
/** * Function that generates the final response based on given params * @param {string} entry - entry url * @param {string} data - data provided by response * @param {function} res - function `res` passed by express * @param {string|int} [status=200] - response status * * @returns {undefined} */ const makeResponse = (entry, data, res, status = 200) => { const INITIAL = buildInitialState(entry, data, status); const STORE = makeStore(INITIAL); const BUILD = renderToString(<StaticRouter location={entry} context={{}}><Provider store={STORE}><App /></Provider></StaticRouter>); const HELMET = Helmet.renderStatic(); res.send(build(HELMET, BUILD, STORE.getState())); }
router.get('*', async (ctx, next) => { const context = {}; global.cookie = ctx.headers.cookie; global.cookieStorage = new Cookies(ctx.headers.cookie); store = createStore(reducer, middlewares()); const promises = getRoutePromises(routes, ctx, store.dispatch, [], context); await promiseAllWrapper(promises); const reactContent = renderToString(<AppContainer><App store={store} url={ctx.url} context={context} routes={routes}/></AppContainer>); const helmet = Helmet.renderStatic(); if (context.url && context.url !== ctx.url) { return ctx.redirect(context.url); } const initialState = store.getState(); // you can add something into the server initialState here... ctx.body = generateLayout(params, reactContent, helmet, initialState); ctx.status = 200; return next(); });
matchRoutes(routes(), req.url, store) .then(() => { const markup = ReactDOMServer.renderToString( <CookiesProvider cookies={req.universalCookies}> <Provider store={store} > <StaticRouter location={req.url} context={{}}> <App isServer /> </StaticRouter> </Provider> </CookiesProvider> ); const helmet = Helmet.renderStatic(); res.status(200).send(Template({ markup, helmet, assets, })); }) .catch(err => res.json(err))
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; }
render() { const { component, store } = this.props const head = Helmet.rewind() const htmlAttributes = head.htmlAttributes.toComponent() return ( <html lang={htmlAttributes.lang}> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="/favicon.ico" /> {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} {this.styles} </head> <body> <div id="root" dangerouslySetInnerHTML={{ __html: renderToString(component) }} /> <script dangerouslySetInnerHTML={{ __html: `window.__PRELOADED_STATE__=${serialize(store.getState())};` }} /> {this.scripts} </body> </html> ) }
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> ) }
render() { const { component, assetPath, store, type, location } = this.props const content = component ? ReactDOM.renderToString(component) : '' const state = JSON.stringify(store.getState()) const head = Helmet.rewind() return ( <html> <head> { head.title.toComponent() } { head.meta.toComponent() } <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i|Lora:700,700i" rel="stylesheet" /> <script dangerouslySetInnerHTML={{ __html: `window.store=${state};` }} charSet="UTF-8" /> </head> <body> <Style rules={ styles } /> <div id="root" dangerouslySetInnerHTML={{ __html: content }} /> <script src="/assets/js/tinymce/tinymce.min.js" /> <script src={`/assets/${type}/bundle.js`} charSet="UTF-8" /> </body> </html> ) }
export default function serverRenderer({ clientStats, serverStats }) { return (req, res, next) => { const context = {}; const markup = ReactDOMServer.renderToString( <StaticRouter location={ req.url } context={ context }> <App /> </StaticRouter> ); const helmet = Helmet.renderStatic(); res.status(200).send(Template({ markup: markup, helmet: helmet, })); }; }
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); });
render () { const {component, store, data} = this.props; const content = component ? ReactDOM.renderToString(component) : ''; const head = Helmet.rewind(); 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' /> <style type='text/css'>{data.css.join('')}</style> </head> <body> <div id='content' dangerouslySetInnerHTML={{__html: content}} /> <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet='UTF-8' /> <script src='http://localhost:9001/dist/bundle.js' /> </body> </html> ); }
} else { const helmet = Helmet.renderStatic()
export default function serverRenderer({ clientStats, serverStats }) { return (req, res, next) => { const context = {}; const markup = ReactDOMServer.renderToString( <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> ); const helmet = Helmet.renderStatic(); res.status(200).send(Template({ markup, helmet })); }; }