Razzle: Hydratation von Stilen, die nicht richtig gerendert werden

Erstellt am 3. Okt. 2018 · 5Kommentare · Quelle: jaredpalmer/razzle

Liebevolle Razzle, so ein tolles Werkzeug.

Ich habe ein Problem, bei dem ich Material UI einrichte und alles funktioniert _fantastisch_, außer einer Sache: Wenn ich eine Unterseite besuche und die Seite aktualisiere, bekomme ich eine Seite mit nur minimalen Stilen. Es ist eigentlich ein faszinierender Fehler, denn je nachdem, welche Seite seit dem letzten yarn start geöffnet war, würde diese Seite nur dann richtig gerendert, wenn sie aktualisiert wurde, aber wenn ich navigiere und aktualisiere, funktioniert sie nicht (auch nicht im Stammpfad).

Starten Sie den Server mit yarn start
Gehen Sie zum Beispiel zu http://localhost:3000/blog-posts
Aktualisieren Sie die Seite (alles sieht scheiße aus)
Server beenden (Browserfenster geöffnet lassen)
Starten Sie den Server mit yarn start
Aktualisieren Sie die Seite und sie sieht schön aus (alles richtig rendern)
Navigieren Sie zu _jeder_ anderen Seite
Aktualisieren, sieht scheiße aus... und wiederholen.

Ich habe yarn build && yarn start:prod ausprobiert und das System läuft, aber nur mit minimalen Stilen. Wenn ich jedoch einen Link finde und darauf klicke, sieht die gesamte Anwendung wieder schön aus.

Ich gehe davon aus, dass es sich um ein Problem mit Hydrat oder vielleicht einer Kombination daraus und @material-ui/core/styles/withStyles . Hat jemand von euch dieses Problem?

Die Klassen sind beim nachfolgenden Laden der Seite unterschiedlich ( gerendertes HTML ), was bedeutet, dass dies wahrscheinlich mit dem anfänglichen Laden isomorpher Stile / Klassen zusammenhängt, von denen ich weiß, dass sie sich auf die folgenden Diskussionen beziehen:

Wie meine Situation oben zeigt, scheint es jedoch manchmal zu funktionieren, was mich denken lässt, dass es näher ist, als diese Diskussionen es erscheinen lassen. Die Gedanken?

Quelle

panbanda

Hilfreichster Kommentar

Man könnte meinen, nach langen mühsamen Stunden der Recherche und des Debuggens wäre es etwas erfreulicher, aber die Lösung besteht im Wesentlichen darin, after.js, React-jss zu verwenden, dein eigenes Document generieren und dann die Zeile am Ende dieses Threads (über MuiThemeProvider, der nur MUI-bezogen ist):

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

Mögen Sie alle den Schmerz vermeiden. :P

panbanda am 8. Okt. 2018

🎉4

Alle 5 Kommentare

Hahahaha ich hatte das gleiche Problem mit Material UI in Razzle 😢

CharlyJazz am 3. Okt. 2018

❤4

@CharlyJazz Das ist sehr (de|ent)mutigend. Haha, hast du versucht, weg von ihrer withStyles Implementierung und hin zu den isomorphen Klassen?

panbanda am 6. Okt. 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 }
  }

Mögen Sie alle den Schmerz vermeiden. :P

panbanda am 8. Okt. 2018

🎉4

@jaredpalmer @jylinman Ist es nicht möglich, ein Beispiel dafür für die Razzle-Dokumentation zu erstellen?

CharlyJazz am 8. Okt. 2018

Allen anderen, die dieses Problem haben, kann ich wärmstens empfehlen, die offiziellen Material-UI-SSR-Dokumente zu befolgen: https://material-ui.com/guides/server-rendering/

jacobfunch am 8. Jan. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Razzle: Hydratation von Stilen, die nicht richtig gerendert werden

Hilfreichster Kommentar

Alle 5 Kommentare

Verwandte Themen