Abort SSR for entire layout
Unanswered
Polar bear posted this in #help-forum
Polar bearOP
I've been dealing with a number of hydration failed issues on a route I have that merges local storage into some data before the first render - meaning the server render will never match the first client render. I'm not really interested in rendering twice (eg once in a 'loading' state); is there a pattern for exempting an entire layout route tree from server side rendering entirely?
7 Replies
@Polar bear I've been dealing with a number of hydration failed issues on a route I have that merges local storage into some data before the first render - meaning the server render will *never* match the first client render. I'm not really interested in rendering twice (eg once in a 'loading' state); is there a pattern for exempting an entire layout route tree from server side rendering entirely?
English Angora
Load all the component tree with dynamic without ssr. anyway i dont see how loading state is related (localstorage is not async) .You need to read it in useEffect to avoid hydration problems. or you can use Zustand store read that data and draw using zustand subscription in your componentes anyway you gonna need double render (you are using a hook to read values after you render the initial UI) unless you lazyload the components (dynamic again) after you read and pass the data via prop. No idea what you storing in localstorage but i prefer store evrything i can in database for persistence across devices.
Polar bearOP
how do I define that at the layout though when the subtree is just {children}
English Angora
Sorry didnt notice your response. you dont since children is passed by router as far i know you cant load children using dynamic you need to load a dynamic component with Dynamic but since you seem to dont want use server components at all what is the point of use app directory. If you want something fully client maybe you should try pages directory. But dont forget you wont have SEO using lazy load. Im having hard time to imagine what you doing exactly and why you need such a strong use of localstorage (i wont even use that for shopping cart) because that kinda data is important to be in server for client suggestion.
Polar bearOP
It’s an electron app it’s not a typical website
I've been dealing with a number of hydration failed issues on a route I have that merges local storage into some data before the first render - meaning the server render will never match the first client render.yep that tracks.
I'm not really interested in rendering twice (eg once in a 'loading' state); is there a pattern for exempting an entire layout route tree from server side rendering entirely?Instead of storing things in the localStorge, maybe you can trrryyy using the cookies since it will get sent the first time you request your pages to the server.
if ure using an electron app, i dont think its really feasible to not render twice (?) otherwise just make a regular web app...
Polar bearOP
yeah it's a bit unfortunate, I just use the same nextjs stuff to serve the desktop and web version of the app but the desktop routes have some edge cases that nextjs isn't the best tool for
atm I have the critical components wrapped in dynamic which isn't great but buys me some time until I can think about it more wholistically