mfathy/LogisicsApp_Client
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

solve Hydration Mismatch problem

Browse Source
This commit is contained in:
m7amedez5511
2026-08-19 18:34:03 +03:00
parent 2d05d3446c
commit c5e4ade2fb
2 changed files with 66 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/components/system/ExtensionAttributeCleanup.tsx
View File

@@ -8,31 +8,65 @@ import { useEffect } from "react";
// React hydrates the page. This causes a harmless but noisy hydration // React hydrates the page. This causes a harmless but noisy hydration
// mismatch warning. This component strips those attributes after mount // mismatch warning. This component strips those attributes after mount
// and keeps watching for re-injection, without disabling SSR/hydration. // and keeps watching for re-injection, without disabling SSR/hydration.
const WATCHED_ATTRS = ["bis_skin_checked", "bis_register", "__processed_by_bitdefender__"]; export const WATCHED_ATTRS = [
"bis_skin_checked",
"bis_register",
"__processed_by_bitdefender__",
] as const;
export function ExtensionAttributeCleanup() { export function ExtensionAttributeCleanup() {
useEffect(() => { useEffect(() => {
if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
return;
}
const selector = WATCHED_ATTRS.map((attr) => `[${attr}]`).join(",");
function strip() { function strip() {
const selector = WATCHED_ATTRS.map(a => `[${a}]`).join(","); const rootElements = [document.documentElement, document.body].filter(
(element): element is HTMLElement => element !== null,
);
rootElements.forEach((element) => {
WATCHED_ATTRS.forEach((attr) => element.removeAttribute(attr));
});
document.querySelectorAll(selector).forEach(el => { document.querySelectorAll(selector).forEach(el => {
WATCHED_ATTRS.forEach(attr => el.removeAttribute(attr)); WATCHED_ATTRS.forEach(attr => el.removeAttribute(attr));
}); });
} }
let frameId: number | null = null;
function scheduleStrip() {
if (frameId !== null) {
return;
}
frameId = window.requestAnimationFrame(() => {
frameId = null;
strip();
});
}
// Initial cleanup right after hydration // Initial cleanup right after hydration
strip(); strip();
// Extensions can re-inject the attribute after every re-render // Extensions can re-inject the attribute after every re-render
// (e.g. after clicking Save, which re-renders the form), so keep // (e.g. after clicking Save, which re-renders the form), so keep
// watching instead of running once. // watching instead of running once.
const observer = new MutationObserver(strip); const observer = new MutationObserver(scheduleStrip);
observer.observe(document.body, { observer.observe(document.documentElement, {
attributes: true, attributes: true,
subtree: true, subtree: true,
attributeFilter: WATCHED_ATTRS, attributeFilter: [...WATCHED_ATTRS],
}); });
return () => observer.disconnect(); return () => {
observer.disconnect();
if (frameId !== null) {
window.cancelAnimationFrame(frameId);
}
};
}, []); }, []);
// Renders nothing — side-effect-only component // Renders nothing — side-effect-only component

28
app/layout.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Script from "next/script";
import "@tabler/icons-webfont/dist/tabler-icons.min.css"; import "@tabler/icons-webfont/dist/tabler-icons.min.css";
import "./globals.css"; import "./globals.css";
import ConditionalNavbar from "./components/layout/ConditionalNavbar"; import ConditionalNavbar from "./components/layout/ConditionalNavbar";
@@ -20,12 +21,35 @@ export default function RootLayout({
<html lang="ar" dir="rtl"> <html lang="ar" dir="rtl">
<body className="app-shell" suppressHydrationWarning> <body className="app-shell" suppressHydrationWarning>
// CHANGE: added — fixes hydration mismatch caused by browser extensions {/* CHANGE: added — fixes hydration mismatch caused by browser extensions */}
<ExtensionAttributeCleanup /> <ExtensionAttributeCleanup />
// CHANGE: navbar is conditional based on route, so we can hide it on login/register pages {/* CHANGE: navbar is conditional based on route, so we can hide it on login/register pages */}
<ConditionalNavbar /> <ConditionalNavbar />
{children} {children}
<Footer /> <Footer />
<Script
id="extension-attribute-pre-hydration-cleanup"
strategy="beforeInteractive"
>
{`(() => {
const attrs = ["bis_skin_checked", "bis_register", "__processed_by_bitdefender__"];
const selector = attrs.map((attr) => "[" + attr + "]").join(",");
function strip() {
document.querySelectorAll(selector).forEach((element) => {
attrs.forEach((attr) => element.removeAttribute(attr));
});
}
strip();
new MutationObserver(strip).observe(document, {
attributes: true,
childList: true,
subtree: true,
attributeFilter: attrs,
});
})();`}
</Script>
</body> </body>
</html> </html>
); );