Server Render

AX HUI on the Server

All Components of @brudi/hui are compatible with Server Render. In fact, the document you see now is rendered by the server.


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. Please 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.


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 { useStyleRegistry } from 'styled-jsx'

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

    return {
      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 { useStyleRegistry } from 'styled-jsx'
import App from './app'

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