search

sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.79k stars 1.96k forks source link

SPA documentation for SvelteKit #7269

Closed Tommertom closed 2 years ago

Tommertom commented 2 years ago

Describe the problem

I'm frustrated when I want to use the next Kit version in SPA mode as the documentation on SPA is always lagging behind. SPA is not the recommended route, but for some people like me - I have to use SPA given some library.

I believe Kit can potentially get more adoption from developers from frameworks like Angular (and maybe React, Vue) who don't use meta-frameworks - so drilled in SPA working - but want to use the great DX from Svelte nevertheless.

Going into Kit, while coming from such SPA thinking is a bit steeper learning curve. So, maybe good to spend a bit of time describing SPA setup and common pitfuls working with SPA in Kit (like sometimes needing to import libraries in onMount).

Describe the proposed solution

I would like to see page https://github.com/sveltejs/kit/edit/master/documentation/docs/13-page-options.md - or some other page - containing a comprehensive description on how to setup SPA in svelte. Previous documentation did mention it a bit better.

I am not sure if the maintainers also wish to provide some specific guidance for people moving from other frameworks. And if not, a SPA guide may help bloggers/vloggers to write some.

Alternatives considered

Posting Q&A's on Reddit, asking questions on Twitter, including tagging Svelte team members.

Importance

nice to have

Additional Information

No response

dummdidumm commented 2 years ago

If you add export const ssr = false to your root +layout.js, you created an SPA - nothing more to do than that. The "import libraries on mount" thing is only needed when you do SSR, too (so, in case of no SPA). Is what you are missing an explicit mention of the term SPA in the documentation, or what exactly is unclear?

Tommertom commented 2 years ago

Thx! That solves my coding problem, I apparantly overlooked that part, as I thought I needed to do const prerender = false in +layout.ts, and then went into the onMount way of solving the problem

Obviously this is not correct - my bad.

Nevertheless, I think if there is a sentence in the SSR paragraph saying "With const ssr = false, you basically making the app run as a SPA", that would have triggered me to do differently, and learn more about kit. In fact, I believe such sentence was there in the previous docs. And it would make a connection with the SPA definition which almost stands alone in the Annex (except for one mention in Adapter Static - but that is not enough to make it a SPA).

The previous doc mentioned, if you add some code related to ssr to hook.ts and use adapter static, you make it a SPA - I believe.

I know SPA is not the preferred way to go in kit, but for some cases usefull (like wrapped in Cordova/Capacitor/Electron) or inevitable (when using SSR-incompatible libraries).

Happy to do a PR on the doc with the sentence on at least two places - Page Options & Page Options|Static Sites. Just for completeness, but also to keep it light.