Je suis également confronté à ce problème lorsque j'utilise des modules css, mais lorsque j'utilise styled-jsx, cela fonctionne bien.

Je remarque un problème similaire: le CSS global dans _app.js ne semble pas être chargé avec JavaScript désactivé lorsqu'il est en mode de développement. Cela rend le test SSR plus difficile car il peut manquer des styles.

@robgraeber J'ai exactement le problème que vous rencontrez. Le CSS est compilé dans _app.js au lieu d'un fichier css séparé.

Même problème ici.
J'ai créé un exemple minimum reproduisant ce problème: https://github.com/dnaranjo89/next-css-ssr

Parfois aussi, je modifie des css globaux dans l'inspecteur et tout changement fait en sorte que le css de la page entière soit détruit d'une manière ou d'une autre. Quelqu'un a-t-il vécu cela?

@derskeal une solution de contournement consiste à utiliser ce plugin sass et à importer vos feuilles de style via sass dans votre composant Layout: https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer Je pourrais reproduire ce problème dans ce référentiel https://github.com/yanv1991/demo-react-dom , cela ne charge pas les styles en utilisant des modules sass intégrés avec un composant chargé dynamique pour ssr en mode prod

Ce projet ne peut pas être exécuté:

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

Cela devrait être corrigé dans next@^9.4.5-canary.15 ! Veuillez mettre à jour et laissez-nous savoir.

Merci @Timer! 🎉 J'ai testé et le correctif fonctionne pour moi.

J'en faisais l'expérience à la fois en mode développement et en mode production sur un serveur personnalisé (conversion incrémentielle de pages sur le site d'entreprise). ^9.4.5-canary.15 corrigé pour moi!

Salut les gars. Vérifié le problème avec la version Canary, il corrige le problème en mode dev, mais en production, il persiste. Quelqu'un rencontre-t-il le même problème?

Dans la version de production, il manque le <style data-next-hide-fouc="true">body{display:none}</style> .

Salut les gars. Vérifié le problème avec la version Canary, il corrige le problème en mode dev, mais en production, il persiste. Quelqu'un rencontre-t-il le même problème?

Dans la version de production, il manque le <style data-next-hide-fouc="true">body{display:none}</style> .

Même chose ici, est-ce que c'est un problème différent quand cela se produit dans la production ou en relation, est-ce que quelqu'un le sait?

Même chose ici, est-ce que c'est un problème différent quand cela se produit dans la production ou en relation, est-ce que quelqu'un le sait?

Pour moi, ce problème ne se produisait qu'en mode développement, pas en mode production. Compte tenu de cela, je suppose que le problème de prod peut avoir une cause différente.

Salut les gars. Vérifié le problème avec la version Canary, il corrige le problème en mode dev, mais en production, il persiste. Quelqu'un rencontre-t-il le même problème?

Dans la version de production, il manque le <style data-next-hide-fouc="true">body{display:none}</style> .

Quelqu'un a-t-il pu résoudre ce problème en production? La version Canary a corrigé notre version de développement, mais la production est toujours interrompue.

alors est la dernière version de canary de Next alors?

Oui @jimmynames , canary est la dernière version de WIP (le terme provient de mineurs utilisant des oiseaux canaris pour tester des fumées toxiques ... La version canari de Next.js pourrait être un sketch).

Ce correctif est sur la version stable de Next.js 9.5.0 et 9.5.1, ou plus récent (s'applique uniquement au serveur de développement)!

Et la production? J'expérimente toujours le FOUC avec StyledComponents + Material UI

Quelqu'un a-t-il trouvé une solution à cela?