Start dsfr client side in useEffect in Next.js for avoiding hydratation errors

garronej · garronej · commit 92e50a707cbf · 2022-12-03T21:40:53.000+01:00
diff --git a/src/lib/start.ts b/src/lib/start.ts
@@ -36,7 +36,10 @@ export async function startDsfrReact(params: Params) {
         setLangToUseIfProviderNotUsed(langIfNoProvider);
     }
 
-    const isNextJsDevEnvironnement = (window as any).__NEXT_DATA__?.buildId === "development";
+    const isNextJs = (window as any).__NEXT_DATA__ !== undefined;
+
+    const isNextJsDevEnvironnement =
+        isNextJs && (window as any).__NEXT_DATA__.buildId === "development";
 
     set_html_color_scheme_attributes: {
         if (document.documentElement.getAttribute(data_fr_theme) !== null) {
@@ -82,12 +85,9 @@ export async function startDsfrReact(params: Params) {
 
     await import("../dsfr/dsfr.module" as any);
 
-    if (isNextJsDevEnvironnement) {
-        // NOTE: @gouvfr/dsfr/dist/dsfr.module.js is not isomorphic, it can't run on the Server.",
-        // We set an artificial delay before starting the module otherwise to avoid getting",
-        // Hydration error from Next.js
-        await new Promise(resolve => setTimeout(resolve, 400));
-    }
+    console.log("disabled");
 
-    (window as any).dsfr.start();
+    if (!isNextJs) {
+        (window as any).dsfr.start();
+    }
 }
diff --git a/src/next.tsx b/src/next.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Head from "next/head";
 import type { NextComponentType } from "next";
 import DefaultApp from "next/app";
@@ -150,6 +150,23 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
                 colorScheme = "light";
             }
 
+            useEffect(() => {
+                if (!isBrowser) {
+                    return;
+                }
+                const { dsfr } = window as any;
+
+                const isStarted = "isStarted";
+
+                if (dsfr[isStarted] === true) {
+                    return;
+                }
+
+                dsfr.start();
+
+                dsfr[isStarted] = true;
+            }, []);
+
             return (
                 <>
                     <Head>
