Server Render

CFX-UI React on the Server

All Components of @cfxjs/react-ui are compatible with Server Render. In fact, the document you see now is rendered by the server.

readme:If you are looking to build a SPA (single page application), please feel free to skip this section.

If you are concerned about losing the advantages of a Single Page Application by implementing server-side rendering, you can use the hybrid render application. Plese read the post from the Next.js team to learn more.

In addition, for server-side render and web applications, we strongly recommend that you read this famous post 7-principles-of-rich-web-applications from Guillermo Rauch.

Next.js

In next.js framework, you need customization file _document.js, please refer to Next.js document here to create file _document.js.

Then we add the following code to the file:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CssBaseline } from '@cfxjs/react-ui'

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = CssBaseline.flush()

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {styles}
        </>
      )
    }
  }

  render() { ... }
}

Here's an example of what your _document.js file should look like: _document.jsx.

Custom Server

In the custom server, also get the style set from function CssBaseline.flush as shown below.

import React from 'react'
import ReactDOM from 'react-dom/server'
import { CssBaseline } from '@cfxjs/react-ui'
import App from './app'

export default (req, res) => {
  const app = ReactDOM.renderToString(<App />)
  const styles = CssBaseline.flush()
  const html = ReactDOM.renderToStaticMarkup(
    <html>
      <head>{styles}</head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: app }} />
      </body>
    </html>,
  )
  res.end('<!doctype html>' + html)
}