segmentio/evergreen

Create SSR example for GatsbyJS

jeroenransijn opened this issue · 3 comments

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.

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>,
  ])
}

Hi, how would this work for React-Static?

stale commented

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.