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

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

• javascript
• css
• next.js
• server-side-rendering

• Did you use a local http server to host the SSR version? – danieltan95 Commented Mar 31, 2021 at 1:19

2 Answers 2

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.

Reference

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'