Add ability to have multiple +page.svelte for one route
Describe the problem
Imagine a typical social media platform, where unauthenticated users are greeted with a marketing site with signup/login on the root path /.
After the user has logged in, the root path typically shows the feed.
If you want to implement this behavior in sveltekit, at the moment your only option is to use if blocks in the / +page.svelte to conditionally show the marketing signup/login page or the authenticated social feed. With this approach you basically mingle two pages into one file and loose the ability to have different layouts or load functions.
Describe the proposed solution
It would be a lot cleaner if these two pages would have separate +page.svelte files.
With the file based routing one of the two pages would have to be declared as a subpath for example the feed page would be located in a /feed/+page.svelte
Now we'd need some kind of server hook similar to the existing reroute to tell the sveltekit router that the feed page is not to be shown as /feed in the url bar but as / based on the user session state.
If you use goto('/feed') this should also trigger the hook and show the feed under the root path.
Alternatives considered
No response
Importance
would make my life easier
Additional Information
No response
That sounds like the job for reroute - it's async now so you can add a backend call in there which tells you where to go based on the user cookie value. Wouldn't that be enough for your use case?
Thought about that as well, but there are two issues with reroute:
- It only gets the
urlandfetch, nothing else (I guess doing a separate fetch, as proposed, can get around the lack of local information...) - The result is supposed to be cacheable
rerouteis considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result ofrerouteon the client so it is only called once per unique URL.
I think some changes will be necessary to accommodate this use case.
I also thought the new reroute would be perfect for this but then I found the limitations @brunnerh cited. For this use case, we either need a separate hook without caching or an option to disable the caching for specific routes in the reroute hook.
Ideally the feed page in my example from above would only be accessible through / and not through /feed.
I don't really see the issue with an if statement. you can easily create two components next to the +page.svelte and pretty much only have that if statement in there
The same goes for the load functions, create one function for each use case and combine them in the actual load function.
To me parallel routes seem like only moving the if into the file system which makes it ultimately harder to understand, atleast with any file structure that comes to my mind right now
With if statements you lose the ability to use different layouts for the 2 pages. Also the code would be a lot more organized if two completely different pages are in different +page.svelte files.
For me, if blocks feel like a huge bandaid fix for a fundamentally simple problem.
I also don't think that this functionality should be done on templating level but on routing level. That way you can change things around a lot easier.