Next.js 未在服务器端渲染中渲染 CSS

Question

I have created next.js application using npx create-next-app and have not made any changes to it.

I noticed that imported.css styles are being rendered properly in Client Side Render but not on Server Side Render.

According to Next.js document imported.css should work just fine.

_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

package.json

{
  "name": "next-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.9",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

CSR:

SSR

Answer 1

If you are not in production mode, it's a normal behavior.

The doc stated this: if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh. if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh.

Reference

Answer 2

I could reproduce this broken css you shared by removing this line:

// pages/index.js
import styles from '../styles/Home.module.css'

and not:

import '../styles/globals.css'