También me enfrento a este problema cuando uso módulos css, pero cuando uso styled-jsx, funciona bien.

Noto un problema similar en el que el CSS global en _app.js no parece estar cargado con javascript desactivado mientras está en modo de desarrollo. Hace que SSR sea más difícil de probar, ya que podrían faltar estilos.

@robgraeber tengo el problema exacto que tienes. El CSS se está compilando en _app.js en lugar de en un archivo css separado.

El mismo problema aquí.
He creado un ejemplo mínimo que reproduce este problema: https://github.com/dnaranjo89/next-css-ssr

También a veces edito algún CSS global en el inspector y cualquier cambio hace que el CSS de toda la página se arruine de alguna manera. ¿Alguien ha experimentado eso?

@derskeal, una solución alternativa es usar este complemento de sass e importar sus hojas de estilo a través de sass en su componente de diseño: https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer Podría reproducir este problema en este repositorio https://github.com/yanv1991/demo-react-dom , esto no carga los estilos usando módulos sass incorporados con un componente cargado dinámico para ssr en modo prod

Este proyecto no se puede ejecutar:

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

¡Esto debería arreglarse en next@^9.4.5-canary.15 ! Actualice y avísenos.

¡Gracias @Timer! 🎉 Probé y la solución funciona para mí.

Estaba experimentando esto tanto en modo de desarrollo como en modo de producción en un servidor personalizado (conversión incremental de páginas en el sitio empresarial). ^9.4.5-canary.15 me lo arregló!

Hola chicos. Verificado el problema con la versión canary, soluciona el problema en modo dev, pero aún permanece en producción. ¿Alguien experimenta el mismo problema?

En la construcción de producción falta <style data-next-hide-fouc="true">body{display:none}</style> .

Hola chicos. Verificado el problema con la versión canary, soluciona el problema en modo dev, pero aún permanece en producción. ¿Alguien experimenta el mismo problema?

En la construcción de producción falta <style data-next-hide-fouc="true">body{display:none}</style> .

Lo mismo aquí, ¿es este un problema diferente cuando sucede en prod o relacionado, alguien lo sabe?

Lo mismo aquí, ¿es este un problema diferente cuando sucede en prod o relacionado, alguien lo sabe?

Para mí, este problema solo ocurría en el modo de desarrollo, no en el modo de producción. Entonces, dado eso, asumiría que el problema de la prod puede tener una causa diferente.

Hola chicos. Verificado el problema con la versión canary, soluciona el problema en modo dev, pero aún permanece en producción. ¿Alguien experimenta el mismo problema?

En la construcción de producción falta <style data-next-hide-fouc="true">body{display:none}</style> .

¿Alguien pudo arreglar esto en producción? La versión de Canary arregló nuestra compilación de desarrollo, pero la producción aún no funciona.

Entonces, ¿es canary la última versión de la próxima?

Sí, @jimmynames , canary es la última versión de WIP (el término se originó a partir de los mineros que usan canary birds para probar humos tóxicos ... La versión canary de Next.js podría ser un boceto).

Esta corrección se encuentra en la versión estable de Next.js 9.5.0 y 9.5.1, o más reciente (solo se aplica al servidor de desarrollo).

¿Y la producción? Todavía estoy experimentando el FOUC con StyledComponents + Material UI

¿Alguien encontró alguna solución para esto?