useServerInsertedHTML twice in HTML code. #49354
-
SummaryWhen I use useServerInsertedHTML I got 2 times in HTML code.
styled.tsx 'use client';
import { useServerInsertedHTML } from 'next/navigation';
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode;
}) {
useServerInsertedHTML(() => {
return <style>STYLE TWICE</style>;
});
if (typeof window !== 'undefined') return <>{children}</>;
return (
<>
{children}
</>
);
}layout.tsx import './globals.css'
import { Inter } from 'next/font/google'
import StyledComponentsRegistry from './styled'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body>
</html>
)
}Additional informationApple M1 Max / OSX 13.3.1
"@types/node": "20.1.0",
"@types/react": "18.2.5",
"@types/react-dom": "18.2.4",
"eslint": "8.40.0",
"eslint-config-next": "13.4.1",
"next": "13.4.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.4"ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
Use const isServerInserted = useRef(false);
useServerInsertedHTML(() => {
if (!isServerInserted.current) {
isServerInserted.current = true;
const styles = styledComponentsStyleSheet.getStyleElement();
styledComponentsStyleSheet.instance.clearTag();
return <>{styles}</>;
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, mate! |
Beta Was this translation helpful? Give feedback.
-
|
Life savior |
Beta Was this translation helpful? Give feedback.
-
|
Facing the same issue when trying to add hydrated css. Is this the expected behaviour ? |
Beta Was this translation helpful? Give feedback.
-
|
good question. smells like a bug to me. |
Beta Was this translation helpful? Give feedback.
-
|
I also wish there was some more information on this hook in the documentation. Right now it's only mentioned in regards to getting certain libraries working, but I have a use-case where based on some fetched data, I need to inject styles into the head. Tt seems like this hook might do that for me, but without documentation I'm not sure if it's supposed to be used in this way. |
Beta Was this translation helpful? Give feedback.
Use
useRefto make it injected once😆