Gatsby: [v2] gatsby-plugin-jss의 잠재적 버그: SheetsRegistry를 지워야 함

기술

특정 스타일 조합을 사용하면 렌더링된 페이지 간에 SheetsRegistry를 지워야 합니다.

재현 단계

이 리포지토리에는 단순화된 재생산이 있으며 이에 대한 수정 사항을 추적합니다.
https://github.com/cpboyd/gatsby-layout-mui-bug

참고: SheetsRegistry 재설정해야 하는 위치가 확실하지 않습니다. 저는 ToString() 호출 후에 배치하기 가장 쉬운 위치에 배치했습니다.

예상 결과

페이지는 자바스크립트 렌더링과 정적 렌더링 간에 일관되게 렌더링되어야 합니다.

실제 결과

스타일이 뒤죽박죽이었다.

환경

체계:
OS: macOS 하이 시에라 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
셸: 3.2.57 - /bin/bash
바이너리:
노드: 10.9.0 - /usr/local/bin/node
원사: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
브라우저:
크롬: 68.0.3440.106
사파리: 11.1.2
npm패키지:
개츠비: ^2.0.0-rc.0 => 2.0.0-rc.0
개츠비 이미지: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-google-analytics: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-jss: ^2.0.2-rc.0 => 2.0.2-rc.0
개츠비 플러그인 레이아웃: 다음 => 1.0.0-rc.0
개츠비 플러그인 매니페스트: ^2.0.2-rc.0 => 2.0.2-rc.0
gatsby 플러그인 오프라인: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0
gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-typescript: ^2.0.0-rc.0 => 2.0.0-rc.1
gatsby-plugin-typography: ^2.2.0-rc.0 => 2.2.0-rc.0
gatsby-remark-external-links: ^0.0.4 => 0.0.4
gatsby-remark-images: ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-remark-responsive-iframe: ^2.0.0-rc.0 => 2.0.0-rc.0
개츠비 소스 파일 시스템: ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-transformer-json: ^2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-remark: ^2.1.1-rc.0 => 2.1.1-rc.0
개츠비 트랜스포머 샤프: ^2.1.1-rc.0 => 2.1.1-rc.0
npmGlobal패키지:
개츠비-cli: 1.1.58

파일 내용(변경된 경우)

gatsby-config.js : 해당 사항 없음
package.json : 해당 사항 없음
gatsby-node.js : 해당 사항 없음
gatsby-browser.js : 해당 사항 없음

원래 gatsby-ssr.js API는 페이지를 렌더링할 때마다 새로운 SheetsRegistry 시작했습니다.

exports.replaceRenderer = (
  { bodyComponent, replaceBodyHTMLString, setHeadComponents },
  { theme = {} }
) => {
  const sheets = new SheetsRegistry()

  const bodyHTML = renderToString(
    <JssProvider registry={sheets}>
      <ThemeProvider theme={theme}>{bodyComponent}</ThemeProvider>
    </JssProvider>
  )

  replaceBodyHTMLString(bodyHTML)
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])
}

이제 변수는 파일 범위이며 렌더링 전반에 걸쳐 지속되는 것 같습니다.

import React from "react"
import { JssProvider, SheetsRegistry, ThemeProvider } from "react-jss"

const sheets = new SheetsRegistry()

// eslint-disable-next-line react/prop-types,react/display-name
exports.wrapRootElement = ({ element }, { theme = {} }) => (
  <JssProvider registry={sheets}>
    <ThemeProvider theme={theme}>{element}</ThemeProvider>
  </JssProvider>
)

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])