function renderComponent(component) { const sheet = new ServerStyleSheet(); const body = renderToString(sheet.collectStyles(component)); // get styles const styles = sheet.getStyleTags(); // getting all the tags from the sheet return { body, styles, // passing the styles to our Layout template }; }
// Creating a single index route to server our React application from. server.get('/', (req, res) => { const sheet = new ServerStyleSheet(); // <-- creating out stylesheet const body = renderToString(sheet.collectStyles(<App />)); // <-- collecting styles const styles = sheet.getStyleTags(); // <-- getting all the tags from the sheet const title = 'Server side Rendering with Styled Components'; res.send( Html({ body, styles, // <-- passing the styles to our Html template title }) ); });
const render = (Tree, path) => { const helmetContext = {} const App = () => ( <HelmetProvider context={helmetContext}> <StaticRouter location={path}> <Tree /> </StaticRouter> </HelmetProvider> ) const sheets = new ServerStyleSheet() const markup = renderToString(sheets.collectStyles(<App />)) const styles = sheets.getStyleTags() const helmet = helmetContext.helmet return wrap({ helmet, markup, styles }) }
function appToString() { return new Promise(resolve => { const appElement = React.createElement(app, { message: 'Hello from server' }) const sheet = new ServerStyleSheet() const html = renderToString(sheet.collectStyles(appElement)) const style = sheet.getStyleTags() return resolve({ html, style }) }) }
app.use( ( req, res ) => { const reduxStore = configureStore( ); const sheet = new ServerStyleSheet(); reduxStore.dispatch( { type: "SERVER_READY" } ); // will be replaced later with a init session prefetchData( req.url, reduxStore.dispatch ).then( ( ) => { const head = Helmet.rewind( ); const reduxState = reduxStore.getState( ); const context = { }; const jsx = ( <ReduxProvider store={ reduxStore }> <StaticRouter location={ req.url } context={ context } > <App /> </StaticRouter> </ReduxProvider> ); const reactDom = renderToString( sheet.collectStyles( jsx ) ); const styles = sheet.getStyleTags(); res.writeHead( 200, { "Content-Type": "text/html" } ); res.end( templateHtml( head, reactDom, reduxState, styles ) ); } ).catch( err => console.log( err ) ); } );
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 }) }
const styleTags = sheet.getStyleTags()
const buildViews = (app) => { const { Router } = express; const router = new Router(); const application = React.createFactory(builtReactApplication); const renderApplication = (url, res, initialState) => { const sheet = new ServerStyleSheet(); const html = renderToString( sheet.collectStyles(application({ url, context: {}, initialState })), ); const styleElements = sheet.getStyleTags(); const templatedHTML = htmlTemplate({ body: html, initialState: JSON.stringify(initialState) }); res.status(200).send(templatedHTML.replace(/<!-- SSR:CSS -->/, styleElements)); }; router.get('/', (req, res, next) => { res.set('Cache-Control', 'public, max-age=60, s-maxage=180'); renderApplication(req.url, res, {}); }); router.get('/favicon.ico', (req, res) => { res.status(204).end(); }); app.use(express.static(path.resolve(__dirname, './../public/assets'))); app.use('/', router); }
sink.appendToHead(stylesheet.getStyleTags()); sink.renderIntoElementById('react-root', content); sink.appendToBody(`
server.get('/', (req, res) => { const body = renderToString(<App />); const styles = sheet.getStyleTags(); const title = 'Server side Rendering with Styled Components'; res.send(Html({ body, styles, title })); });
const css = sheet.getStyleTags() res.status(200).send(page({ store,
const styleTags = sheet.getStyleTags(); sheet.seal(); ctx.state.markup = markup;
export default function( element, title="React Template" ) { const sheet = new ServerStyleSheet(); const reactDom = ReactDOMServer.renderToStaticMarkup( sheet.collectStyles(element) ); const styleTags = sheet.getStyleTags(); return ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>${title}</title> ${styleTags} </head> <body> ${reactDom} </body> </html> `; }
/* Creating a single index route to server our React app */ server.get('/', (req, res) => { const sheet = new ServerStyleSheet() const body = renderToString(sheet.collectStyles(<App />)) const styles = sheet.getStyleTags() const title = 'Server side Rendering with react and styled components' res.send( Html({ body, styles, title }) ); });
// Creating a single index route to server our React application from. server.get('/', (req, res) => { /** * This is where all the magic happens with Styled Components and * rendering our React application to string so we can insert it * into our HTML template to send to the client. */ const sheet = new ServerStyleSheet(); const body = renderToString(sheet.collectStyles(<App />)); // <-- collecting styles const styles = sheet.getStyleTags(); // <-- getting all the tags from the sheet const title = 'Server side Rendering with Styled Components'; res.send( Html({ body, styles, // <-- passing the styles to our Html template title }) ); });