static async getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); // see https://github.com/nfl/react-helmet#server-usage for more information // 'head' was occupied by 'renderPage().head', we cannot use it return { ...page, styleTags, helmet: Helmet.rewind() }; }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />), }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), } } finally { sheet.seal() } }
// 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 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 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 }; }
static getInitialProps({ renderPage, req }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); const fontsAreLoaded = (req.headers.cookie || "").indexOf("fonts-loaded") !== 0; return { ...page, styleTags, fontsAreLoaded }; }
static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />) }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: [...initialProps.styles, ...sheet.getStyleElement()] }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; }
static getInitialProps ({ renderPage }) { const sheet = new ServerStyleSheet() const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)) const styleTags = sheet.getStyleElement() return { ...page, styleTags } }
static getInitialProps ({ renderPage }) { const sheet = new ServerStyleSheet() const page = renderPage(App => props => sheet.collectStyles(<App {...props} />)) const styleTags = sheet.getStyleElement() return { ...page, styleTags } }
static getInitialProps({ renderPage }) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props} />) ); const styleTags = sheet.getStyleElement(); return { ...page, styleTags }; // return styles collected }