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 Nextjs#

Here'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

Advanced#

You 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>`)
Edit this page