Razzle: 適切にレンダリングされないスタイルのハイドレーション

作成日 2018年10月03日 · 5コメント · ソース: jaredpalmer/razzle

愛するラズル、そのような素晴らしいツール。

マテリアルUIをセットアップし、1つを除いてすべてが_素晴らしく_機能しているという問題があります。サブページにアクセスしてページを更新すると、最小限のスタイルのみのページが表示されます。これは実際には魅力的なバグです。最後のyarn startから開いたページによっては、更新された場合にのみそのページが適切にレンダリングされるためですが、ナビゲートして更新すると（ルートパス上でも）機能しません。

yarn startサーバーを起動します
たとえば、 http://localhost:3000/blog-postsします
ページを更新します（すべてががらくたのように見えます）
サーバーを強制終了します（ブラウザウィンドウを開いたままにします）
yarn startサーバーを起動します
ページを更新すると、美しく見えます（すべてを適切にレンダリングします）
別のページに移動します
リフレッシュして、がらくたのように見えます...そして繰り返します。

yarn build && yarn start:prodを試してみたところ、システムは実行されましたが、最小限のスタイルでしか実行できませんでした。ただし、リンクを見つけてクリックすると、アプリケーション全体が再び美しく見えます。

私はそれがハイドレートまたは多分それと@material-ui/core/styles/withStylesいくつかの組み合わせの問題であると仮定しています。この問題に遭遇している人はいますか？

その後のページの読み込みでは、クラスが異なります（レンダリングされたhtml ）。これは、おそらく、次の説明に関連していることを認識している同形スタイル/クラスの初期読み込みに関連していることを意味します。

デモCSSモジュールhttps://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

しかし、私の状況が上に示しているように、それは時々それらの議論がそれを見せているよりも近くにあると私に思わせるように働いているようです。考え？

ソース

panbanda

最も参考になるコメント

長い退屈な調査とデバッグの後はもう少し満足できると思うかもしれませんが、修正は基本的にafter.js、react-jssを使用して、独自のDocument 、次に下部の行を生成しますこのスレッドの（MUI関連のみであるMuiThemeProviderについて）：

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

皆さんが痛みを避けてくださいますように。：P

panbanda 2018年10月08日

🎉4

全てのコメント5件

ハハハハラズルのマテリアルUIでも同じ問題が発生しました😢

CharlyJazz 2018年10月03日

❤4

@CharlyJazzそれは非常に（en | dis）勇気づけられます。ハハ、 withStyles実装から同型クラスに移行してみましたか？

panbanda 2018年10月06日

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

皆さんが痛みを避けてくださいますように。：P

panbanda 2018年10月08日

🎉4

@jaredpalmer @jylinman razzleドキュメント用にこの例を作成することはできませんか？

CharlyJazz 2018年10月08日

この問題が発生している他の人には、公式のMaterial-UI SSRドキュメントに従うことを強くお勧めします： https ：

jacobfunch 2019年01月08日

このページは役に立ちましたか？

0 / 5 - 0 評価

Razzle: 適切にレンダリングされないスタイルのハイドレーション

最も参考になるコメント

全てのコメント5件

関連する問題