Keep the root layout on the server
The Zeenat component contains its own client boundary, so importing it in an App Router layout does not turn the layout into a Client Component. Server output is a stable, empty decoration root.
import { Zeenat } from "zeenat";
import type { ReactNode } from "react";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Zeenat preset="winter" />
{children}
</body>
</html>
);
}Why the import is SSR safe
Zeenat accesses no window, document, navigator or matchMedia during module evaluation. Browser work begins in the component's client effect. The vanilla entry is also safe to import during SSR, but zeenat() itself must be called in a browser.
Decorate one route
Place Zeenat in a nested layout or a page-specific Client Component when a decoration should only exist in one route segment. React unmount cleanup removes the root, animations, timers and scoped listeners.