Building a Browser-Like Tab Experience (Server vs. Client State Mgmt)
Unanswered
Toy Fox Terrier posted this in #help-forum
Toy Fox TerrierOP
Hey there,
I am looking for someone to give me a hand with my turbo repo:
https://github.com/Jopgood/tabOS/
I am hitting my head against the wall trying to understand/implement a system for intelligently managing state between serverside and client side. The idea is that the user can navigate the site through tabs rather than page routes. We need the state of this on the client-side so that it feels super snappy for the user but we also need to store that same state in the database so that they can easily change browsers/refresh the page and not lose their state (and perhaps state within those tabs too).
I've tried various patterns for this such as:
1. Zustand + Periodic synchronisation to the database
2. Realtime websockets with the database (basically server-side only state)
3. Combination of the two (so every request goes both to Zustand and to the database)
Sadly there aren't really any open source examples of web apps that make use of a tab system while also storing the user's state off site. You have Linear, Obsidian, Replit, etc. but they are all closed source and then there's VSCode but that seems like way too big of beast to understand and convert into a simple Next.js web app. I currently have a working-ish example that makes use of tRPC and Tanstack Query and optimistic updates and while this works (-ish) for adding/removing tabs it does get a little buggy when rearranging tabs and DX-wise just feels a bit clunky?
I am looking for someone to give me a hand with my turbo repo:
https://github.com/Jopgood/tabOS/
I am hitting my head against the wall trying to understand/implement a system for intelligently managing state between serverside and client side. The idea is that the user can navigate the site through tabs rather than page routes. We need the state of this on the client-side so that it feels super snappy for the user but we also need to store that same state in the database so that they can easily change browsers/refresh the page and not lose their state (and perhaps state within those tabs too).
I've tried various patterns for this such as:
1. Zustand + Periodic synchronisation to the database
2. Realtime websockets with the database (basically server-side only state)
3. Combination of the two (so every request goes both to Zustand and to the database)
Sadly there aren't really any open source examples of web apps that make use of a tab system while also storing the user's state off site. You have Linear, Obsidian, Replit, etc. but they are all closed source and then there's VSCode but that seems like way too big of beast to understand and convert into a simple Next.js web app. I currently have a working-ish example that makes use of tRPC and Tanstack Query and optimistic updates and while this works (-ish) for adding/removing tabs it does get a little buggy when rearranging tabs and DX-wise just feels a bit clunky?