Create SSR example for GatsbyJS

[Jeroen Ransijn]

I am using Gatsby for some of my prototypes and want to make SSR work. I will add an example as soon as I have done this.

[Jeroen Ransijn]

Create a file called gatsby-ssr.js in your project root with the following contents. Learn more about Gatsby SSR: https://www.gatsbyjs.org/docs/ssr-apis/

/* eslint-disable react/no-danger */
import React from 'react'
import { extractStyles } from 'evergreen-ui'

exports.onRenderBody = ({ setHeadComponents }) => {
  // Get the css and hydration script from Evergreen.
  const { css, hydrationScript } = extractStyles()

  // Takes an array of components as its first argument which are added to
  // the headComponents array which is passed to the html.js component.
  setHeadComponents([
    // We need a key here for Gatsby to stop complaining.
    <React.Fragment key="evergreen-ssr">
      <style id="evergreen-css" dangerouslySetInnerHTML={{ __html: css }} />
      {hydrationScript}
    </React.Fragment>,
  ])
}

[Adrian Wix]

Hi, how would this work for React-Static?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.