服务端渲染

在服务端的 CFX-UI React

@cfxjs/react-ui 的所有组件都能完美的适应 服务端渲染，实际上，你现在所见的文档站点就是来自服务端渲染。

阅读提示:如果你只想创建一个 SPA 应用，建议跳过此章节。

使用服务端渲染会让我们的应用失去 SPA 的所有优势吗？或许你可以考虑 hybrid render (混合渲染) 的应用，阅读这篇来自 Next.js 团队的文章了解更多细节。

除此之外，关于 服务端渲染 和 Web 应用的细节考量，我们强烈推荐你阅读这篇来自 Guillermo Rauch 的著名博文：构建 Web 应用的 7 原则。

使用 Next.js

在 next.js 框架中，你首先需要创建 _document.js 文件来填充自定义信息，请参考 Next.js 的官方文档创建 _document.js 文件。

随后我们将以下示例代码加入到文件中即可：

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() { ... }
}

这里也准备了一个完整的应用示例供作参考: _document.jsx。

定制服务端

在你自定义的服务端或其他预渲染框架中，你可以通过函数 CssBaseline.flush 获取所有样式文本。

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