Add react-snap

package.json

@@ -37,7 +37,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "tscss": "typed-scss-modules src --watch",
-    "buildServe": "yarn build && serve -s build --ssl-cert ./192.168.1.150.pem --ssl-key ./192.168.1.150-key.pem"
+    "buildServe": "yarn build && serve -s build --ssl-cert ./192.168.1.150.pem --ssl-key ./192.168.1.150-key.pem",
+    "postbuild": "react-snap"
   },
   "eslintConfig": {
     "extends": [
@@ -58,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "react-snap": "^1.23.0",
     "serve": "^13.0.2",
     "typed-scss-modules": "^6.4.0"
   }

src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -9,15 +9,26 @@ import './i18n';
 
 serviceWorkerRegistration.register();
 
-const root = createRoot(
-  document.getElementById('root')!
-);
 
-root.render(
+if (document.getElementById('root')?.hasChildNodes()) {
-  <React.StrictMode>
+  const root = hydrateRoot(
-    <App />
+    document.getElementById('root')!,
-  </React.StrictMode>
+    <React.StrictMode>
-)
+      <App />
+    </React.StrictMode>
+
+  );
+} else {
+  const root = createRoot(
+    document.getElementById('root')!
+  );
+
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  )
+}
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))