How execute <Script> in every render ?
Unanswered
Fire ant posted this in #help-forum
Fire antOP
Hello, i have a basic Script for the light and dark mode :
<head>
<Script id="theme-init" strategy="beforeInteractive">
{`
try {
const stored = localStorage.getItem('theme');
if (stored === 'dark' || stored === 'light') {
document.documentElement.setAttribute('data-theme', stored);
document.cookie = 'theme=' + stored + '; Path=/; Max-Age=31536000; SameSite=Lax';
}
} catch (e) {}
`}
</Script>
</head>5 Replies
Fire antOP
I should point out that the pages generated by this layout.tsx are made with SSG, so i can't use cookies.
Cinnamon Teal
Is there a reason you are going with your own implementation instead of using
If there is no specific reason I would use a library like that for this as it handles everything fine.
Pretty sure they also use a similar technique to yours where they execute a script just before hydration happens on the client.
next-themes? https://www.npmjs.com/package/next-themesIf there is no specific reason I would use a library like that for this as it handles everything fine.
Pretty sure they also use a similar technique to yours where they execute a script just before hydration happens on the client.
Fire antOP
In my case, implementing a dark/light mode is very simple; I assumed I didn't need an external library for such a small task. But looking at the package contents, it seems like you're using a custom React hook to implement it. So, why not do the same thing instead of using a
<script>?Cinnamon Teal
Yeah, I agree I would also try to implement it by self instead of adding another package.
But this is one place I personally have realized it gives better DX instead of me trying to implement it by myself. That's why I just wanted to mention that library here.
But this is one place I personally have realized it gives better DX instead of me trying to implement it by myself. That's why I just wanted to mention that library here.
it seems like you're using a custom React hook to implement it. So, why not do the same thing instead of using a <script>?Not sure whether I understood your question correctly. But that library also executes a script before hydration happens but it's just that we don't have to worry about that part. I don't think there is another way to properly pick the correct theme on a server rendered page without having a flicker otherwise. And then it gives us a hook to read and write values.
Fire antOP
I tested next-themes, it's working. I'm quite curious to know how the script is executed each time before hydration.