---
title: Server-Side Rendering | gluestack-style
description: gluestack-style provides support for server-side rendering (SSR) by exporting a flush function to flush out any styles that were generated during the SSR process.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="configuration/SSR" />

# 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:

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