Razzle: Hidrasi Gaya Tidak Dirender dengan Benar

Dibuat pada 3 Okt 2018 · 5Komentar · Sumber: jaredpalmer/razzle

Razzle yang penuh kasih, alat yang hebat.

Saya mengalami masalah ketika saya mengatur UI Material dan semuanya berfungsi _fantastis_ kecuali untuk satu hal: Saat mengunjungi sub halaman dan menyegarkan halaman memberi saya halaman dengan hanya gaya minimal. Ini sebenarnya bug yang menarik karena tergantung pada halaman apa yang dibuka dari yarn start itu hanya akan membuat halaman itu dengan benar jika disegarkan, tetapi jika saya menavigasi dan menyegarkan itu tidak akan berfungsi (bahkan di jalur root).

Mulai server dengan yarn start
Pergi ke http://localhost:3000/blog-posts misalnya
Segarkan halaman (semuanya terlihat seperti sampah)
Matikan server (biarkan jendela browser tetap terbuka)
Mulai server dengan yarn start
Segarkan halaman dan tampilannya indah (render semuanya dengan benar)
Navigasikan ke _any_ halaman lain
Segarkan, terlihat seperti sampah... dan ulangi.

Saya mencoba yarn build && yarn start:prod dan sistem berjalan, tetapi hanya dengan gaya minimal. Namun, jika saya menemukan tautan dan mengkliknya maka seluruh aplikasi terlihat indah kembali.

Saya berasumsi ini masalah dengan hidrat atau mungkin kombinasi dari itu dan @material-ui/core/styles/withStyles . Apakah ada di antara Anda yang mengalami masalah ini?

Kelasnya berbeda ( html yang dirender ) pada pemuatan halaman berikutnya yang berarti mungkin terkait dengan pemuatan awal gaya/kelas isomorfik yang saya ketahui terkait dengan diskusi berikut:

Namun, seperti yang ditunjukkan situasi saya di atas, tampaknya berhasil beberapa waktu yang membuat saya berpikir itu lebih dekat daripada diskusi yang membuatnya muncul. Pikiran?

Sumber

panbanda

Komentar yang paling membantu

Anda akan berpikir setelah berjam-jam yang melelahkan untuk meneliti dan men-debug itu akan sedikit lebih memuaskan, tetapi perbaikannya pada dasarnya menggunakan after.js, react-jss, menghasilkan Document dan kemudian baris di bagian bawah dari utas ini (tentang MuiThemeProvider yang hanya terkait dengan 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 }
  }

Semoga Anda semua terhindar dari rasa sakit. :P

panbanda pada 8 Okt 2018

🎉4

Semua 5 komentar

Hahahaha saya punya masalah yang sama dengan Material UI di Razzle

CharlyJazz pada 3 Okt 2018

❤4

@CharlyJazz Itu sangat (en|dis)menggembirakan. Haha apakah Anda mencoba menjauh dari implementasi withStyles dan masuk ke kelas isomorfik?

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

Semoga Anda semua terhindar dari rasa sakit. :P

panbanda pada 8 Okt 2018

🎉4

@jaredpalmer @jylinman Apakah tidak mungkin membuat contoh ini untuk dokumentasi razzle?

CharlyJazz pada 8 Okt 2018

Kepada siapa pun yang mengalami masalah ini, saya sangat merekomendasikan mengikuti dokumen resmi Material-UI SSR: https://material-ui.com/guides/server-rendering/