NextJS - discrepancy between client and server class hash name - race condition

[leobenkel]

Expected behavior:

The generated class name should be consistent and deterministic on client and server side.

Describe the bug:

When launching the server for the first time, the class aligns. Randomly, when the page is refreshed, the newly client-side generated class does not match the server-side generated names.

The error is :

Warning: Prop `className` did not match. 
Server: "ctaBtn-cta_btn-0-2-55" 
Client: "ctaBtn-cta_btn-0-2-6"

Reproduction:

• Use createUseStyles in js files to generate css
• Using Next (I use Netlify as well), launch the dev server: netlify dev -e -p 4000.
• Load a page
• Either reload several times or try to modify the code, the page should refresh on its own.
• css breaks because Next is un-happy about the mis-match.

Versions (please complete the following information):

  "dependencies": {
    "@netlify/plugin-nextjs": "^3.4.2",
    "lodash": "^4.17.21",
    "next": "^10.0.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-jss": "^10.6.0",
    "react-onclickoutside": "^6.11.2",
    "react-svg": "14.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.6",
    "postcss": "^8.3.0",
    "sass": "^1.34.1"
  }

[guanrongjia]

same problem

[leobenkel]

@guanrongjia , I found a solution :

in _app.js:

import { JssProvider } from 'react-jss'


const createGenerateId = (rule, sheet, c) => {
// make a hash that is stable or hardcode something using 
// `sheet.options.classNamePrefix` and/or `rule.key` 
// and look at other fields in `rule` and `sheet`
// mine is :
    return `${websiteName}--${sheet.options.classNamePrefix}_-${rule.key}`
}

export default function App({ Component, pageProps }) {

     // if you have more App code ....

    return <JssProvider generateId={createGenerateId}>
        <Component {...pageProps} />
    </JssProvider>
}

[qnxdev]

How do I use random classnames on CSR Nextjs, something like cn(main-wrapper) --> 'aSq6Jh'

[leobenkel]

How do I use random classnames on CSR Nextjs, something like cn(main-wrapper) --> 'aSq6Jh'

it cant be fully random because the generated names would be different on server and client.