I want to get information from indexedDB and include this in the first render
Answered
Keyhole wasp posted this in #help-forum
Keyhole waspOP
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 in nextjs?
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 in nextjs?
Answered by Arinji
have a loading state, in a useEffect read your indexedDB and your localstorage and all the goodies you need
59 Replies
@Keyhole wasp just make a client component
have a loading state, in a useEffect read your indexedDB and your localstorage and all the goodies you need
Answer
set your loading state to completed, and in the ui just show a spinner when you are loading
Keyhole waspOP
useEffect runs after hydration (and therefore first render), right?
@Arinji set your loading state to completed, and in the ui just show a spinner when you are loading
Keyhole waspOP
I'm looking to make it really fast
its.. fast
its relatively
@Keyhole wasp useEffect runs after hydration (and therefore first render), right?
thats just how react server components the concept itself works
you render a page on the server, but react has to go through your page and hydrate atleast once to link your virtual dom with the actual dom
Keyhole waspOP
but conceptually it should be possible to get it before though, the benefit of react server components is so that the client doesn't need to download a huge bundle, but if the info is on the client already it should be usable by first render
@Keyhole wasp but conceptually it should be possible to get it before though, the benefit of react server components is so that the client doesn't need to download a huge bundle, but if the info is on the client already it should be usable by first render
not really, conceptually react dosent know what anything is till it goes through the page once
it hydrates the page once, sees you need local stuff, gets the loca stuff and updates the page
Keyhole waspOP
ok so i'd probably have to circumvent idiomatic react then
but like optimally this makes sense right
if something is on the client, don't wait for hydration
you already have it ready
why wait
not really, even with normal react its gonna take long
with nextjs the duration shortens since it renders most of the page on the server
with react it renders the content + checks your local stuff
@Keyhole wasp but like optimally this makes sense right
not the react way to do it, maybe you shld check out other frameworks
Keyhole waspOP
so I'd probably just run a script before it renders and tell react to ignore it so it doesn't give a out of sync hydration error
i realize this is alot of stuff to avoid having to wait for hydration
just make a client component, and check for your localstorage in a useEffect and save it to a state variable
you wont get hydration errors from that
Keyhole waspOP
right that waits for hydration though, which is the problem i'm trying to avoid
rn it's first render -> hydration -> second render with indexedDB info
which is how react works :(
Keyhole waspOP
i want it to be first render with indexDB info -> hydration -> second render
gotcha
what you could do
is get the data from a different page, like the layout component
and pass that as props
not sure tho
its better to just do it the react way
then fight it
Keyhole waspOP
this seems like a relatively obvious and intuitive optimization though that i'm concerned that I'm not understanding properly
if X is available to you then utilize X as soon as possible
thing is, how do you know X is available to you
Keyhole waspOP
if X is in cache then use X, if not, wait for hydration to fetch
nextjs just returns an html page, the js dosent exist at that point
Keyhole waspOP
it's like all the other caching mechanisms in nextjs
indexedDB is on client so conceptually it should be there by first render
optimally
@Keyhole wasp if X is in cache then use X, if not, wait for hydration to fetch
how is a local thing gonna get cached.. its local and unique to a user
Keyhole waspOP
indexedDB/localstorage is cached in browser
@Keyhole wasp indexedDB is on client so conceptually it should be there by first render
its on the client yes, but your site dosent even know what you want
all you get is an html page
thats it
last i checked, html dosent have interactivity
Keyhole waspOP
sure, you get html page, but you can run js before hydration to add indexedDB info to the html before the hydration happens, it's a 0.001 second delay vs 0.5 second
@Keyhole wasp sure, you get html page, but you can run js before hydration to add indexedDB info to the html before the hydration happens, it's a 0.001 second delay vs 0.5 second
again, at that point just use a different framework then fighting with react
you are fighting how react does its rendering
Keyhole waspOP
gotcha
react cant just choose to stop mapping to the virtual dom
@Keyhole wasp gotcha
np, mark a solution
Keyhole waspOP
@riský
@Arinji have a loading state, in a useEffect read your indexedDB and your localstorage and all the goodies you need
when you are here risky, mark this as the solution (ik you will ask for the answer)