Razzle: Hidratação de estilos não renderizados corretamente

Criado em 3 out. 2018 · 5Comentários · Fonte: jaredpalmer/razzle

Razzle adorável, uma ótima ferramenta.

Estou tendo um problema ao configurar a IU do material e tudo está funcionando _fantasticamente_ exceto por uma coisa: ao visitar uma subpágina e atualizar a página, vejo uma página com apenas estilos mínimos. Na verdade, é um bug fascinante porque dependendo de qual página foi aberta a partir do último yarn start ele apenas renderizaria a página corretamente se atualizado, mas se eu navegar e atualizar ele não funcionará (mesmo no caminho raiz).

Inicie o servidor com yarn start
Vá para http://localhost:3000/blog-posts por exemplo
Atualize a página (tudo parece uma merda)
Mate o servidor (mantenha a janela do navegador aberta)
Inicie o servidor com yarn start
Atualize a página e ela ficará linda (renderizando tudo corretamente)
Navegue para _qualquer_ outra página
Atualizar, parece uma merda ... e repita.

Tentei yarn build && yarn start:prod e o sistema funciona, mas apenas com estilos mínimos. No entanto, se eu encontrar um link e clicar nele, todo o aplicativo ficará lindo novamente.

Estou assumindo que é um problema com hidrato ou talvez alguma combinação disso e @material-ui/core/styles/withStyles . Algum de vocês está enfrentando esse problema?

As classes são diferentes ( html renderizado ) no carregamento de página subsequente, o que significa que provavelmente está relacionado ao carregamento inicial de estilos / classes isomórficos que estou ciente está relacionado às seguintes discussões:

Módulo CSS de demonstração https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

No entanto, como minha situação mostra acima, parece estar funcionando algumas vezes, o que me faz pensar que está mais próximo do que aquelas discussões estão fazendo parecer. Pensamentos?

Fonte

panbanda

Comentários muito úteis

Você pensaria que depois de longas e tediosas horas de pesquisa e depuração seria um pouco mais gratificante, mas a correção é basicamente usar after.js, react-jss, gerando seu próprio Document e depois a linha na parte inferior deste tópico (sobre MuiThemeProvider, que é relacionado apenas ao 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 vocês evitem a dor. :P

panbanda em 8 out. 2018

🎉4

Todos 5 comentários

Hahahaha tive o mesmo problema com Material UI no Razzle 😢

CharlyJazz em 3 out. 2018

❤4

@CharlyJazz Isso é muito (en|des)animador. Haha você tentou se afastar da implementação withStyles e entrar nas classes isomórficas?

panbanda em 6 out. 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 vocês evitem a dor. :P

panbanda em 8 out. 2018

🎉4

@jaredpalmer @jylinman Não é possível criar um exemplo disso para a documentação do razzle?

CharlyJazz em 8 out. 2018

Para qualquer pessoa que esteja enfrentando esse problema, recomendo seguir os documentos oficiais do Material-UI SSR: https://material-ui.com/guides/server-rendering/