Question about ui.expansion and browser sessions

[frankhuurman]

Question

Not sure if I'm asking something dumb but when I run the following simple code snippet:

from nicegui import ui

with ui.expansion("test"):
    ui.label("testy test")

ui.run()

and use my phone's browser to go to the local IP (e.g. http://192.168.1.10:8080) and toggle the expansion element, it also toggles the expansion in my laptop browser and vice-versa as shown below:

2023-12-12.20-37-54.mp4

This makes me wonder that if I deploy our team's application to a random server and if multiple coworkers are on the same page and try to toggle an expansion element that they'll be seeing this in both their respective browsers instead of only expanding it for your own session.

Now I'm wondering how the main NiceGUI website does not seem to have this problem on the documentation page(https://nicegui.io/documentation/section_page_layout#expansion_element) when other visitors toggle the element. Perhaps I'm missing something that's related to sessions or to the way a locally running app behaves different from a deployed one?

[falkoschindler]

Hi @frankhuurman, I think this FAQ answers your question:
https://github.com/zauberzeug/nicegui/wiki/FAQs#why-are-all-browser-tabswindows-showing-the-same-content

TL;DR
In order to serve pages with individual state to each client, you need to use the ui.page decorator.

[frankhuurman]

Ah exactly what I was looking for, thanks @falkoschindler! I could've sworn I ran into this before and solved it somehow but forgot it had something to do with the ui.page decorator.

Didn't end up at the FAQ when looking for keywords like "session" on the main NiceGUI site, perhaps some more keywords could be added to the Pages & Routing documentation so it's easier to find :)

[falkoschindler]

Yes, since it is such a fundamental concept in NiceGUI, we should make sure one finds the relevant section in the documentation. Actually the search index is built from the textual content itself. So we could simply extend the description. Any specific suggestions or pull requests are very welcome. 🙂