How to use the aphrodite.StyleSheetServer.renderStatic function in aphrodite

renderMethod: (root, styleTags) => {
    const { css, html } = StyleSheetServer.renderStatic(() => {
      return renderToString(root);
    });
    const head = [
      ...styleTags,
      <style data-aphrodite="">{`${css.content}`}</style>,
    ];
    const rehydrate = `window.renderedClassNames = ${JSON.stringify(
      css.renderedClassNames,
    )};`;
    const additionalScript = [
      // eslint-disable-next-line react/no-danger

function renderComponent(comp, destinations, callback = noop) {
  destinations = arrify(destinations)
  const {html, css} = StyleSheetServer.renderStatic(() => ReactDOMServer.renderToStaticMarkup(comp))
  const string = html.replace('/* aphrodite-content */', css.content)
  async.parallel(
    destinations.map(d => cb => writeFile(d, string, cb)),
    callback,
  )
}

static render(element, opts) {
    // eslint-disable-next-line global-require
    const { StyleSheetServer } = require('aphrodite')
    const { css, html } = StyleSheetServer.renderStatic(() => preactToString(element, null, opts))
    return {
      css: css.content,
      html,
    }
  }
}

import React from 'react';
import { StyleSheetServer } from 'aphrodite';
import ReactDOMServer from 'react-dom/server';
import HtmlToReact from 'html-to-react';
import Layout from './Layout.jsx';
import Demo from './Demo.jsx';

// Contains the generated html, as well as the generated css and some
// rehydration data.
const { html, css } = StyleSheetServer.renderStatic(() => ReactDOMServer
  .renderToStaticMarkup());

export { html, css };

export default function Index() {
  return (
    
      {(new HtmlToReact.Parser(React)).parse(html)}
    
  );
}

":hover": {
                color: "blue",
            },
        },
    });

    // Generate some CSS with Aphrodite class names in it.
    return `<div class="${css(styles.red)}">
        Hover, and I'll turn blue!
    </div>`;
}

const {StyleSheetServer} = require("aphrodite");

// Call our render function inside of StyleSheetServer.renderStatic
const {css, html} = StyleSheetServer.renderStatic(() =&gt; {
    return render();
});

// Observe our output HTML and the Aphrodite-generated CSS
`<style>${css.content}</style>${html}`;

<span>
                This is blue.
            </span>
            <span>
                This is blue and turns red when the browser is less than
                600px width.
            </span>
            <span>
                With font
            </span>
        ;
    }
}

const output = StyleSheetServer.renderStatic(() =&gt; {
    return "test";
});

output.css.content;
output.css.renderedClassNames;
output.html;

StyleSheet.rehydrate(output.css.renderedClassNames);

StyleSheetTestUtils.suppressStyleInjection();
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();

static async getInitialProps({ renderPage }) {
    const { html, css } = StyleSheetServer.renderStatic(() => renderPage());
    return { ...html, css };
  }

}, res.locals.networkLayer).then(({ data, props }) => {
    const { html, css } = StyleSheetServer.renderStatic(() => {
      return ReactDOMServer.renderToString()
    })
    res.send(`
      
      
        <style data-aphrodite="">${css.content}</style>
        
        
      
      
        <div id="root">${html}</div>

return decodeURIComponent(result);
      }

      return result;
    },
  };

  const index =
    '' +
    ReactDOMServer.renderToStaticMarkup(
       {
          return ReactDOMServer.renderToString(
            
              
              
                
                  
                    
                      
                    
                  
                
              
            
          );
        })}
      />

static async getInitialProps({ renderPage }) {
    const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
    const ids = css.renderedClassNames
    return { ...html, css, ids }
  }