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()
registry.flush()
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{styles}
</>
)
}
}
render() { ... }
}
Here's an example of what your _document.js
file should look like: _document.jsx.
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()
registry.flush()
const html = ReactDOM.renderToStaticMarkup(
<html>
<head>{styles}</head>
<body>
<div id="root" dangerouslySetInnerHTML={{ __html: app }} />
</body>
</html>,
)
res.end('<!doctype html>' + html)
}