Duplicate styles using SSR in Next.js about griffel

[Yukioru]

Thanks, I will update the code in my project 👍🏻
I will watch for an update to makeStaticStyles().

This issue can be closed.

[layershifter]

@Yukioru thanks for the interest and reporting 👍 There are two separate issues actually...

Proper configuration

We perform rehydration on the client, it's done in RendererProvider:

griffel/packages/react/src/RendererContext.tsx

Lines 36 to 38 in 0a94e83

	// "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
	// avoid double insertion of classes
	rehydrateRendererCache(renderer, targetDocument);

The difference is in configuration, I updated your CodeSandbox (https://codesandbox.io/s/next-griffel-ssr-forked-2zok5q). In short the same instance of renderer should be used, for this RendererProvider should be moved to App:

// @document.jsx
     originalRenderPage({
        enhanceApp: (App) => {
          return function EnhancedApp(props) {
            return (
-              <RendererProvider renderer={renderer}>
-                <App {...props} />
+                <App {...props} renderer={renderer} />
-              </RendererProvider>
            );
          };
        }
      });

// @app.jsx
-function App({ Component, pageProps }) {
+function App({ Component, pageProps, renderer }) {
  return (
+    <RendererProvider renderer={renderer || createDOMRenderer()}>

Before

After

makeStaticStyles() does not support hydration

This was not implemented yet, but should... 🐱 I created a separate #44 to track this.