Razzle: Hydratation des styles ne rendant pas correctement

Créé le 3 oct. 2018 · 5Commentaires · Source: jaredpalmer/razzle

Aimer razzle, un si bon outil.

J'ai un problème où je configure Material UI et tout fonctionne _fantastiquement_ à l'exception d'une chose: lorsque vous visitez une sous-page et actualisez la page, je donne une page avec uniquement des styles minimaux. C'est en fait un bug fascinant car en fonction de la page ouverte depuis le dernier yarn start cette page ne serait correctement rendue que si elle était actualisée, mais si je navigue et que je l'actualise, cela ne fonctionnera pas (même sur le chemin racine).

Démarrez le serveur avec yarn start
Allez à http://localhost:3000/blog-posts par exemple
Rafraîchir la page (tout ressemble à de la merde)
Tuez le serveur (gardez la fenêtre du navigateur ouverte)
Démarrez le serveur avec yarn start
Actualisez la page et elle est magnifique (rend tout correctement)
Accédez à _n'importe quelle_ autre page
Rafraîchir, ça ressemble à de la merde... et répétez.

J'ai essayé yarn build && yarn start:prod et le système fonctionne, mais uniquement avec des styles minimaux. Cependant, si je trouve un lien et que je clique dessus, l'ensemble de l'application est à nouveau magnifique.

Je suppose que c'est un problème d'hydrate ou peut-être une combinaison de cela et de @material-ui/core/styles/withStyles . L'un d'entre vous rencontre-t-il ce problème ?

Les classes sont différentes ( rendu html ) lors du chargement de la page suivante, ce qui signifie que cela est probablement lié au chargement initial des styles/classes isomorphes qui, je le sais, sont liés aux discussions suivantes :

Module CSS de démonstration https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

Cependant, comme ma situation le montre ci-dessus, cela semble fonctionner de temps en temps, ce qui me fait penser que c'est plus proche que ces discussions ne le font paraître. Les pensées?

Source

panbanda

Commentaire le plus utile

On pourrait penser qu'après de longues heures fastidieuses de recherche et de débogage, ce serait un peu plus gratifiant, mais le correctif utilise essentiellement after.js, react-jss, générant votre propre Document puis la ligne en bas de ce fil (à propos de MuiThemeProvider qui est uniquement lié à MUI):

  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 }
  }

Puissiez-vous tous éviter la douleur. :P

panbanda le 8 oct. 2018

🎉4

Tous les 5 commentaires

Hahahaha j'ai eu le même problème avec Material UI dans Razzle 😢

CharlyJazz le 3 oct. 2018

❤4

@CharlyJazz C'est très (fr|dé)courageant. Haha, avez-vous essayé de vous éloigner de leur implémentation withStyles pour les classes isomorphes ?

panbanda le 6 oct. 2018

  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 }
  }

Puissiez-vous tous éviter la douleur. :P

panbanda le 8 oct. 2018

🎉4

@jaredpalmer @jylinman N'est-il pas possible de créer un exemple de cela pour la documentation de razzle ?

CharlyJazz le 8 oct. 2018

À toute autre personne rencontrant ce problème, je peux fortement recommander de suivre la documentation officielle Material-UI SSR : https://material-ui.com/guides/server-rendering/