I want to get information from the indexedDB and include this in the first render, without delay
The issue is that react code needs to be hydrated before being executed, so you can't get info from localStorage or indexedDB before hydration.
The only thing I found that might help is this, https://www.joshwcomeau.com/react/dark-mode/ but it's only for setting CSS variables.
chatGPT says there's no way to do this (scroll to bottom): https://chat.openai.com/share/dd719413-5c39-42f1-a695-456971288648
but I find this hard to believe. Surely there must be an idiomatic way to accomplish this?
The Quest for the Perfect Dark Mode
Dark Mode has become common enough that it's a user expectation. And yet, creating the perfect dark mode with a statically-built site/app is deceptively tricky. In this in-depth tutorial, we'll see how to build the perfect, flicker-free, customizable theming solution for React and Gatsby apps.
ChatGPT
A conversational AI system that listens, learns, and challenges
2 Replies
help much appreciated
this is blocking me because I have OCD
If I'm understanding correctly, you want to access IndexedDB server side because you want to include data from it in the html served to the client?
All components in Nextjs have their first render on the server. Client components render once on the server and once more when they're on the client and hydrate the DOM. Server components once and only once before they're sent to the client.
So you can't really have access to the contents to IndexedDB on first render because it always happens on the server and IndexedDB is obviously a browser API
@python8u