search

bvaughn / react-resizable-panels

https://react-resizable-panels.vercel.app/
MIT License
3.87k stars 135 forks source link

Example for fixing SSR flicker in NextJS page router #282

Closed michaelkremenetsky closed 8 months ago

michaelkremenetsky commented 8 months ago

Would you happen to have any ideas on how to fix the SSR flicker in the NextJS page router?

bvaughn commented 8 months ago

the SSR flicker in the NextJS page router

I don't know what this is referring to.

Did you check out the FAQ entry about this though? https://github.com/bvaughn/react-resizable-panels?tab=readme-ov-file#how-can-i-use-persistent-layouts-with-ssr

michaelkremenetsky commented 8 months ago

Ya I was asking if you had a way to do that with the NextJS page router.

bvaughn commented 8 months ago

Sorry 🤷🏼 Does it not work? If it doesn't work, I'll need to see a repro.

michaelkremenetsky commented 8 months ago

I was just asking if there was a way to persist the layout using a cookie without using react server components as the next/headers API seems to only be available when using the app router.

I'm getting this hydration error in the console: Prop `data-panel-size` did not match. Server: "null" Client: "13.5"

Sorry, I realized my first question wasn't clear at all. It's flickering because I have a virtualized component that is using a resize observer and since it can't access the localStorage on the server it causes it to render with a width of 0 for the first render when navigating to a new page causing a flicker.

So I was just trying to ask if you have an example of how to use the cookies to persist the layout when using the NextJS page router.

bvaughn commented 8 months ago

I was just asking if there was a way to persist the layout using a cookie without using react server components

There might be but it's not something I've thought about or have an answer for.

I'm getting this hydration error in the console: Prop `data-panel-size` did not match. Server: "null" Client: "13.5"

It sounds like you need to access the cookie value on the server somehow. I don't know how, within Next's ecosystem, except for using next/headers.

This is probably a question you'd have better luck asking them. 😄

michaelkremenetsky commented 8 months ago

For anyone coming back to this later, I ended up using the atomWithStorage from jotai. Thanks for the awesome lib @bvaughn!

bvaughn commented 8 months ago

Thanks for sharing your solution! 🙇🏼