[docs] update gatsby-plugin-styled-components to mention CSS and SSR

Description

I am currently using Gatsby to generate a static site from a CMS. On the front-end I am using styled components for styling and no additional CSS libraries other than a simple reset file.

I was experiencing a flash of unstyled content with my website after running a build and began researching this issue to find out that I needed to alter the gatsby-ssr.js file in order to remedy the issue. After fixing the flash as demonstrated below I realized that the new version leave the gatsby container empty of html when built and therefore here I am seeking some additional info/help as to how to fix the flash but still have a fully generated html page.

Original gatsby-ssr.js (causes flash):

import React from 'react';
import { Provider } from 'react-redux';

import Layout from 'layouts';

import createStore from './src/store';

let store = null;
export const wrapRootElement = ({ element, ...rest }) => {
  // Instantiating store in `wrapRootElement` handler ensures:
  //  - there is fresh store for each SSR page
  //  - it will be called only once in browser, when React mounts
  store = createStore();

  return (
    <Provider store={store}>
      <Layout>{element}</Layout>
    </Provider>
  );
};

New gatsby-ssr.js (fixes flash):

import React from 'react';
import { Provider } from 'react-redux';
import { renderToString } from "react-dom/server";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";

import Layout from 'layouts';

import createStore from './src/store';


let store = null;

export const replaceRenderer = ({
  element,
  replaceBodyHTMLString,
  setHeadComponents
}) => {
  const sheet = new ServerStyleSheet();
  store = createStore();

  const app = () => (
    <Provider store={store}>
      <StyleSheetManager sheet={sheet.instance}>
        <Layout>{element}</Layout>
      </StyleSheetManager>
    </Provider>
  )
  replaceBodyHTMLString(renderToString(<app />));
  setHeadComponents([sheet.getStyleElement()]);
}

So after analyzing the output from each I realized that this new version, although it fixes the flash, it causes the body of the outputted html to be empty but is ultimately populated by the JS chunks that are included with the web bundle. Ideally I would like the page to be static html and not have any flash issues.

Steps to reproduce

Was hoping that the code exmaples above would be enough to show the problem but I can generate a demo if needed.

Expected result

I am expecting that same html be output into the static html file since I am not changing the “child” element being passed into the <Layout> component in the gatsby-ssr.js file.

Actual result

The generated static html file does not have any content inside of the Gatsby wrapper.

Environment

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 59.0.2
    Safari: 13.1
  npmPackages:
    gatsby: ^2.19.45 => 2.19.45
    gatsby-image: ^2.4.5 => 2.4.5
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6
    gatsby-plugin-gtag: ^1.0.13 => 1.0.13
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
    gatsby-plugin-react-helmet: ^3.3.2 => 3.3.2
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5
    gatsby-plugin-sass: ^2.3.2 => 2.3.2
    gatsby-plugin-styled-components: ^3.3.2 => 3.3.2

[LekoArts]

Glad that you figured it out! We’d be happy to receive a PR from you updating the docs regarding that aspect!

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜