Jss server side render with custom createGenerateClassName

[up209d]

I used createGenerateClassName on both Client Side and Server Side

const createGenerateClassName = () => {
  let counter = 0;
  return (rule, sheet) => {
    counter++;
    console.log(counter);
    return `custom--${rule.key}-${counter}`
  }
};

Then ...

<JssProvider jss={jss} generateClassName={createGenerateClassName()}>
   ...
</JssProvider>

By my expectation, every request ( browser refreshes ) it should log all the counter which were made. That is true by client side but not server side, I got full of the counter log for the very first request then after refreshing browser for following requests, client-side got full log every time meanwhile server-side got no counter log at all. That's so weird as a result, for every route change and after a refresh, I ended up with

Warning: Prop className did not match...

I am using:
"react": "^16.2.0",
"react-jss": "8.4.0"
"jss": "9.8.1"

[kof]

it can only mean that you are not rerendering your component on the server on each request, I guess you have some sort of caching, but without actually seing the code I am useless.

[up209d]

@kof I tried to make the scenario here, not exactly but I can only get the counter log for the very first time of render function, in the following renders counter logging does not appear. Could you help me take a look?

https://codesandbox.io/s/1qq6mj7j27

[kof]

Hmm, needs further investigation, I also tried https://codesandbox.io/s/6jmrxkw50r

Seems like something is caching but its not clear what, might be a bug!

[kof]

@up209d do you want to dig into it?

[up209d]

@kof Yeah, I shall spend time looking into the src code. Since I used react-jss, I am not sure where is the source of that caching, could be inside jss core or react-jss itself. I shall report soon when I figure out the spot.

[up209d]

It looks like react-jss is the one to blame, since vanilla jss is totally fine with createGenerateClassName.

https://codesandbox.io/s/9zr309968o

It is something to do with injectSheet as well as JssProvider.

[up209d]

I got it, turned out react-jss cache SheetsRegistry.

JssProvider.js

    if (registry) {
      context[ns.sheetsRegistry] = registry
      // This way we identify a new request on the server, because user will create
      // a new Registry instance for each.
      if (registry !== this.registry) {
        // We reset managers because we have to regenerate all sheets for the new request.
        this.managers = {}
        this.registry = registry
      }
    }

If SheetsRegistry is cached, it won't call the new createGenerateClassName, instead it will use the cached SheetsRegistry. So in order to assign new createGenerateClassName, we have to reset registry={new SheetsRegistry()} from JssProvider

https://codesandbox.io/s/xo6njj5mmq