Next.js: Server pengembangan memiliki flash konten tanpa gaya (FOUC)

Dibuat pada 18 Mei 2020 · 20Komentar · Sumber: vercel/next.js

Laporan bug

Jelaskan bugnya

Penjelasan yang jelas dan ringkas tentang apa itu bug.

Saat menggunakan Next.js, tampaknya CSS tidak sepenuhnya terhidrasi ke dalam <head> ketika elemen <div id="__next"> pertama kali terlihat.

Ini menyebabkan flash konten tidak bergaya (atau FOUC) saat menjalankan server pengembangan kami. Sepertinya itu baik-baik saja dalam produksi (yang menurut saya aneh).

Untuk Mereproduksi

Langkah-langkah untuk mereproduksi perilaku, berikan cuplikan kode atau repositori:

Gandakan repositori ini dengan menjalankan:

$ git clone https://github.com/tutorbookapp/covid-tutoring

Instal dependensi kami (detail selengkapnya di README.md ) dengan menjalankan:

$ npm i && lerna bootstrap --hoist

Mulai server pengembangan dengan menjalankan:

$ npm run dev

Perhatikan FOUC saat pertama kali memuat halaman.

Perilaku yang diharapkan

Deskripsi yang jelas dan ringkas tentang apa yang Anda harapkan akan terjadi.

Elemen <div id="__next"> hanya boleh terlihat setelah lembar gaya paruh atas yang diperlukan (yaitu lembar gaya yang disertakan dalam komponen React yang terlihat di paruh atas) dimasukkan ke dalam <head> . Stylesheet yang tersisa kemudian dapat dimuat dengan elemen <div id="__next"> terlihat.

Screenshot

Jika memungkinkan, tambahkan tangkapan layar untuk membantu menjelaskan masalah Anda.

Lihat FOUC yang terlihat di server pengembangan kami:

fouc

Perhatikan bahwa itu hilang di situs web produksi kami :

no-fouc

Sistem Informasi

OS: Ubuntu 18.04.2
Browser: Firefox 76.0.1
Versi Next.js: 9.4.0
Versi Node.js: 12.16.1

bug needs investigation

Sumber

nicholaschiang

👍16

Komentar yang paling membantu

Bagaimana dengan produksi? Saya masih mengalami FOUC dengan StyledComponents + Material UI

florianmatz pada 20 Agu 2020

👍29

Semua 20 komentar

Saya juga menghadapi masalah ini ketika saya menggunakan modul css tetapi ketika saya menggunakan gaya-jsx maka itu berfungsi dengan baik.

avijitelu pada 18 Mei 2020

Saya melihat masalah serupa bahwa css global di _app.js tampaknya tidak dimuat dengan javascript saat itu dalam mode dev. Itu membuat SSR lebih sulit untuk diuji karena mungkin ada gaya yang hilang.

robgraeber pada 21 Mei 2020

👍4

@robgraeber Saya memiliki masalah persis seperti yang Anda lakukan. CSS sedang dikompilasi menjadi _app.js sebagai ganti file css terpisah.

derskeal pada 22 Mei 2020

👍1

Masalah yang sama di sini.
Saya telah membuat contoh minimum yang mereproduksi masalah ini: https://github.com/dnaranjo89/next-css-ssr

dnaranjo89 pada 22 Mei 2020

Juga terkadang saya akan mengedit beberapa css global di inspektur dan setiap perubahan menyebabkan seluruh css halaman menjadi rusak entah bagaimana. Apakah ada yang mengalaminya?

robgraeber pada 22 Mei 2020

@derskeal solusinya adalah menggunakan plugin sass ini dan mengimpor stylesheet Anda melalui sass di komponen Tata Letak Anda: https://github.com/giuseppeg/styled-jsx-plugin-sass

robgraeber pada 24 Mei 2020

@Timer Saya dapat mereproduksi masalah ini di repo ini https://github.com/yanv1991/demo-react-dom , ini tidak memuat gaya menggunakan modul sass bawaan dengan komponen yang dimuat dinamis untuk ssr dalam mode prod

yanv1991 pada 2 Jun 2020

👍2

Proyek ini tidak dapat dijalankan:

error - Error [FirebaseError]: projectId must be a string in FirebaseApp.options
    at new FirestoreError (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:1223:28)
    at Function.Firestore.databaseIdFromApp (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:21018:19)
    at new Firestore (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:20850:42)
    at /Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22871:66
    at Component.instanceFactory (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22410:16)
    at Provider.getOrInitializeService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:228:49)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:440:39)
    at Object.serviceNamespace [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:420:45)
    at eval (webpack-internal:///./src/firebase/db.tsx:19:124)
    at Module../src/firebase/db.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:128:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31)
    at eval (webpack-internal:///./src/firebase/user.tsx:12:61)
    at Module../src/firebase/user.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:152:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31) {
  code: 'invalid-argument',
  toString: [Function]
}

Timer pada 22 Jun 2020

Ini harus diperbaiki dalam next@^9.4.5-canary.15 ! Harap tingkatkan dan beri tahu kami.

Timer pada 22 Jun 2020

🎉6 👍6 ❤1

Terima kasih @Timer! 🎉 Saya menguji dan perbaikan berhasil untuk saya.

showell215 pada 22 Jun 2020

Saya mengalami ini dalam mode pengembang dan mode produksi di server khusus (secara bertahap mengonversi laman di situs perusahaan). ^9.4.5-canary.15 memperbaikinya untuk saya!

jimbuck pada 30 Jun 2020

Hai kawan. Memeriksa masalah dengan rilis kenari, itu memperbaiki masalah dalam mode pengembang tetapi masih dalam produksi. Apakah seseorang mengalami masalah yang sama?

Dalam pembuatan produksi tidak ada <style data-next-hide-fouc="true">body{display:none}</style> .

casperle pada 6 Jul 2020

👍2

Hai kawan. Memeriksa masalah dengan rilis kenari, itu memperbaiki masalah dalam mode pengembang tetapi masih dalam produksi. Apakah seseorang mengalami masalah yang sama?
Dalam pembuatan produksi tidak ada <style data-next-hide-fouc="true">body{display:none}</style> .

Sama halnya di sini, apakah ini masalah yang berbeda ketika terjadi di prod atau terkait, ada yang tahu?

ozthekoder pada 17 Jul 2020

Sama halnya di sini, apakah ini masalah yang berbeda ketika terjadi di prod atau terkait, ada yang tahu?

Bagi saya masalah ini hanya terjadi dalam mode pengembang, bukan mode produksi. Jadi mengingat itu, saya berasumsi masalah prod mungkin memiliki penyebab yang berbeda.

showell215 pada 17 Jul 2020

Hai kawan. Memeriksa masalah dengan rilis kenari, itu memperbaiki masalah dalam mode pengembang tetapi masih dalam produksi. Apakah seseorang mengalami masalah yang sama?
Dalam pembuatan produksi tidak ada <style data-next-hide-fouc="true">body{display:none}</style> .

Adakah yang bisa memperbaiki ini dalam produksi? Rilis kenari memperbaiki versi developer kami, tetapi produksinya masih rusak.

BlakeBrown pada 18 Jul 2020

👍4

jadi apakah canary versi terbaru dari next?

jimmynames pada 30 Jul 2020

Ya @jimmynames , kenari adalah versi terbaru WIP (istilah ini berasal dari penambang yang menggunakan burung kenari untuk menguji asap beracun ... Versi kenari Next.js bisa berupa sketsa).

nicholaschiang pada 31 Jul 2020

Perbaikan ini ada pada rilis stabil Next.js 9.5.0 dan 9.5.1, atau yang lebih baru (hanya berlaku untuk server pengembangan)!

Timer pada 31 Jul 2020

👍2

Bagaimana dengan produksi? Saya masih mengalami FOUC dengan StyledComponents + Material UI

florianmatz pada 20 Agu 2020

👍29

Apakah ada yang menemukan solusi untuk ini?