To begin, the most straightforward approach is to utilize one of the provided templates. These templates come pre-configured with the necessary settings, such as CssBaseline and other fundamental components.
If you're new to GitHub and need guidance on initiating a project using a template, you can access comprehensive instructions on how to get started on this example.
All Components of @bolio-ui/core
are compatible with Server Render. In fact, the page you see now is rendered by the server.
Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side), instead of rendering them in the browser. SSR sends a fully rendered page to the client; the client's JavaScript bundle takes over and enables the SPA framework to operate, the best option to use server side render in React.js is using Next.js.
If you are worried 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 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 React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CssBaseline } from '@bolio-ui/core'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
}
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
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 { CssBaseline } from '@bolio-ui/core'
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)
}
Next
Example with Vite