Example with Next.js

Get started with a example

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.

Server Render

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.

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

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

Example with Vite

MADE & DESIGNED WITHBY BRUNO ANDRADE