Razzle: Hidratación de estilos que no se reproducen correctamente

Creado en 3 oct. 2018 · 5Comentarios · Fuente: jaredpalmer/razzle

Me encanta el razzle, una gran herramienta.

Tengo un problema en el que configuro Material UI y todo funciona _fantásticamente_ excepto por una cosa: cuando visito una subpágina y actualizo la página, aparece una página con solo estilos mínimos. En realidad, es un error fascinante porque, dependiendo de qué página se abrió desde el último yarn start , solo mostraría esa página correctamente si se actualiza, pero si navego y actualizo, no funcionará (incluso en la ruta raíz).

Inicie el servidor con yarn start
Vaya a http://localhost:3000/blog-posts por ejemplo
Actualizar la página (todo parece una mierda)
Elimina el servidor (mantén abierta la ventana del navegador)
Inicie el servidor con yarn start
Actualice la página y se ve hermosa (representando todo correctamente)
Navegar a _cualquier_ otra página
Actualizar, parece una mierda... y repetir.

Probé yarn build && yarn start:prod y el sistema se ejecuta, pero solo con estilos mínimos. Sin embargo, si encuentro un enlace y hago clic en él, toda la aplicación vuelve a verse hermosa.

Supongo que es un problema con el hidrato o tal vez una combinación de eso y @material-ui/core/styles/withStyles . ¿Alguno de ustedes se encuentra con este problema?

Las clases son diferentes ( html renderizado ) en la carga de la página posterior, lo que significa que probablemente esté relacionado con la carga inicial de estilos/clases isomorfos que, según tengo entendido, se relacionan con las siguientes discusiones:

Módulo CSS de demostración https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

Sin embargo, como mi situación muestra arriba, parece estar funcionando parte del tiempo, lo que me hace pensar que está más cerca de lo que parecen esas discusiones. ¿Pensamientos?

Fuente

panbanda

Comentario más útil

Pensarías que después de largas y tediosas horas de investigación y depuración sería un poco más gratificante, pero la solución es básicamente usar after.js, react-jss, generar tu propio Document y luego la línea en la parte inferior de este hilo (sobre MuiThemeProvider, que solo está relacionado con 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 }
  }

Que todos ustedes eviten el dolor. :PAGS

panbanda en 8 oct. 2018

🎉4

Todos 5 comentarios

Jajajaja tuve el mismo problema con Material UI en Razzle 😢

CharlyJazz en 3 oct. 2018

❤4

@CharlyJazz Eso es muy (en|des)alentador. Jaja, ¿intentaste alejarte de su implementación withStyles y entrar en las clases isomorfas?

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

Que todos ustedes eviten el dolor. :PAGS

panbanda en 8 oct. 2018

🎉4

@jaredpalmer @jylinman ¿No es posible crear un ejemplo de esto para la documentación de razzle?

CharlyJazz en 8 oct. 2018

A cualquier otra persona que experimente este problema, le recomiendo encarecidamente que siga los documentos oficiales de Material-UI SSR: https://material-ui.com/guides/server-rendering/