Architecture for website with routes to entirely different canvases (or none at all)

[leone6]

Hello - I am trying to figure out the best way to achieve the following using the NextJS app router ideally (although I would consider using something like Vite or Astro as well):

• users can login via a Nav that is persisted on all routes. the user state for logged in users should be maintained for all routes.
• the homepage has a list of links to various routes. some of the routes are for 3d experiences (built with r3f) but other routes do not need a canvas at all. the home page doesn't need a canvas or any threejs overhead
• each individual 3d experience built with r3f has its own state, gltf assets, shaders, etc. (assets are not shared between them)

i guess my question boils down to: does anyone have advice re: best practices for something like this? the simplest solution might be just to instantiate a new Canvas on every route that needs it, but of course this could lead to too many contexts being used (if many tabs are open, even though it wouldn't make sense for users to do that)