CSS 모듈을 사용할 때도이 문제에 직면했지만 styled-jsx를 사용하면 제대로 작동합니다.

_app.js의 전역 CSS가 개발 모드에있는 동안 자바 스크립트가 꺼진 상태로로드되지 않는 것 같은 유사한 문제를 발견했습니다. 누락 된 스타일이있을 수 있으므로 SSR을 테스트하기가 더 어렵습니다.

@robgraeber 나는 당신이하는 정확한 문제가 있습니다. CSS는 별도의 css 파일 대신 _app.js로 컴파일됩니다.

여기에도 같은 문제가 있습니다.
이 문제를 재현하는 최소 예제를 만들었습니다 : https://github.com/dnaranjo89/next-css-ssr

또한 때로는 관리자에서 일부 전역 CSS를 편집하고 변경하면 전체 페이지의 CSS가 어떻게 든 손상됩니다. 경험 한 사람 있나요?

@derskeal 해결 방법은이 sass 플러그인을 사용하고 레이아웃 구성 요소에서 sass를 통해 스타일 시트를 가져 오는 것입니다. https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer 나는이 repo https://github.com/yanv1991/demo-react-dom 에서이 문제를 재현 할 수

이 프로젝트는 실행할 수 없습니다 :

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

이것은 next@^9.4.5-canary.15 에서 수정되어야합니다! 업그레이드하여 알려주십시오.

@Timer 감사합니다! 🎉 테스트를했고 수정 사항이 효과가 있습니다.

커스텀 서버 (엔터프라이즈 사이트에서 점진적으로 페이지 변환)의 개발 모드와 프로덕션 모드에서이 문제를 경험했습니다. ^9.4.5-canary.15 수정했습니다!

안녕하세요. 카나리아 릴리스의 문제를 확인하고 개발 모드에서 문제를 해결했지만 프로덕션에서는 여전히 문제가 남아 있습니다. 누군가가 같은 문제를 경험합니까?

프로덕션 빌드에는 <style data-next-hide-fouc="true">body{display:none}</style> .

안녕하세요. 카나리아 릴리스의 문제를 확인하고 개발 모드에서 문제를 해결했지만 프로덕션에서는 여전히 문제가 남아 있습니다. 누군가가 같은 문제를 경험합니까?

프로덕션 빌드에는 <style data-next-hide-fouc="true">body{display:none}</style> .

여기에서 똑같습니다. 이것은 찌르기 또는 관련에서 발생할 때 다른 문제입니까? 누구든지 알고 있습니까?

여기에서 똑같습니다. 이것은 찌르기 또는 관련에서 발생할 때 다른 문제입니까? 누구든지 알고 있습니까?

나에게이 문제는 프로덕션 모드가 아닌 개발 모드에서만 발생했습니다. 따라서 나는 prod 문제가 다른 원인을 가질 수 있다고 가정합니다.

안녕하세요. 카나리아 릴리스의 문제를 확인하고 개발 모드에서 문제를 해결했지만 프로덕션에서는 여전히 문제가 남아 있습니다. 누군가가 같은 문제를 경험합니까?

프로덕션 빌드에는 <style data-next-hide-fouc="true">body{display:none}</style> .

프로덕션에서이 문제를 해결할 수있는 사람이 있습니까? Canary 릴리스는 개발 빌드를 수정했지만 프로덕션은 여전히 ​​중단되었습니다.

그럼 다음 카나리아 최신 버전인가요?

예 @jimmynames , canary는 WIP 최신 버전입니다 (이 용어는 카나리아 새를 사용하여 독성 연기를 테스트하는 광부에서 유래했습니다 ... Next.js의 카나리아 버전은 스케치가 될 수 있습니다).

이 수정 사항은 Next.js 9.5.0 및 9.5.1 이상의 안정적인 릴리스에 있습니다 (개발 서버에만 적용됨)!

생산은 어떻습니까? 나는 여전히 StyledComponents + Material UI로 FOUC를 경험하고 있습니다.

아무도 이것에 대한 해결책을 찾았습니까?