Server-Side Rendering

gluestack-style facilitates server-side rendering (SSR) through the provision of a flush function. This function flushes out any styles generated during the server-side rendering process. This enables these styles to be added to the HTML document. To use the flush function, you must import and call it in the _document.jsx or _document.tsx file, which is a file specific to Next.js that can be customized to modify the document that is sent to the browser.

To avert flickering, you should attach the 'gs' class, which heightens the specificity of any employed inline styles.

We also recommend attaching either the 'gs-dark' or 'gs-light' class to define the default color mode. This will ensure that the appropriate color mode is applied from the server side and prevent any visual inconsistencies during the initial page load.

Here is an example of how you can use the flush function and attach gs & gs-dark classes in the _document.jsx or _document.tsx file:

import { flush } from "@gluestack-style/react"

class MyDocument extends Document {
  render() {
    return (
      <Html className="gs gs-dark">
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export async function getInitialProps({ renderPage }: any) {
  AppRegistry.registerComponent("Main", () => Main)
  const { getStyleElement } = AppRegistry.getApplication("Main")
  const page = await renderPage()
  const styles = [
    <style dangerouslySetInnerHTML={{ __html: style }} />,
    getStyleElement(),
    ...flush(),
  ]
  return { ...page, styles: React.Children.toArray(styles) }
}

Document.getInitialProps = getInitialProps

export default MyDocument

In this example, we import the flush function and invoke it within the getInitialProps method. This method returns both the initial properties and the generated styles. These styles are subsequently integrated into the HTML document through the creation of multiple style tags.

It's crucial to ensure that the flush function is called after the server has rendered the React tree. This ensures that the styles are correctly flushed.

Utilizing the flush function guarantees that your styles are accurately rendered on the server, thereby enhancing your application's performance.