Skip to main content

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>`)