Server Side Rendering
You can get the CSS string by getCssString()
function. You can import it from @fower/react
.
import { getCssString, getAtomIds } from '@fower/react'
#
With NextjsHere's an example with Next.js (Don't forget to set data-fower={getAtomIds()}
in style tag):
_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'import { getAtomIds, getCssString } from '@fower/react'
class MyDocument extends Document { render() { return ( <Html> <Head> <style data-fower={getAtomIds()} dangerouslySetInnerHTML={{ __html: getCssString() }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) }}
export default MyDocument
Alternative you can setup it with a <ServerStyle>
component:
import Document, { Html, Head, Main, NextScript } from 'next/document'import { ServerStyle } from '@fower/react'
class MyDocument extends Document { render() { return ( <Html> <Head> <ServerStyle /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) }}
export default MyDocument
#
AdvancedYou can also use the advanced integration, it's very simple, just use getAtomId
and getCssString
to generate style element in your server
import { renderToString } from 'react-dom/server'import { getAtomIds, getCssString } from '@fower/react'
const html = renderToString(<App />)
res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My site</title> <style data-fower="${getAtomIds()}">${getCssString()}</style></head><body> <div id="root">${html}</div>
<script src="./bundle.js"></script></body></html>`)