fix(ssr): add emotion cache

Author: Shchepotin

package-lock.json

@@ -18,7 +18,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "11.14.0",
+    "@emotion/server": "^11.11.0",
     "@emotion/styled": "11.14.1",
     "@faker-js/faker": "9.8.0",
     "@fontsource/roboto": "5.2.6",

package.json

@@ -1,5 +1,3 @@
-"use client";
-
 import InitColorSchemeScriptMui from "@mui/material/InitColorSchemeScript";
 
 function InitColorSchemeScript() {

src/components/theme/init-color-scheme-script.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [{ cache, flush }] = useState(() => {
+    const cache = createCache({ key: "mui" });
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+}

src/components/theme/registry.tsx

@@ -5,6 +5,7 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
 import { useMemo, PropsWithChildren } from "react";
+import StyledJsxRegistry from "./registry";
 
 function ThemeProvider(props: PropsWithChildren<{}>) {
   const theme = useMemo(
@@ -18,7 +19,11 @@ function ThemeProvider(props: PropsWithChildren<{}>) {
     []
   );
 
-  return <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>;
+  return (
+    <StyledJsxRegistry>
+      <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
+    </StyledJsxRegistry>
+  );
 }
 
 export default ThemeProvider;