The Svelte documentation states that:
Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time.
...
It is similar to JavaScript frameworks such as React and Vue...
In the context of the above my question is:
Is Svelte limited to building single-page applications (SPA) and can it be used for creating multi-page applications (MPA)?
The Svelte documentation states that:
Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time.
...
It is similar to JavaScript frameworks such as React and Vue...
In the context of the above my question is:
Is Svelte limited to building single-page applications (SPA) and can it be used for creating multi-page applications (MPA)?
Share Improve this question edited Sep 20, 2022 at 14:41 Uros C asked Apr 28, 2022 at 13:03 Uros CUros C 2,0173 gold badges25 silver badges37 bronze badges 5- 2 take a look at svelte kit – CD.. Commented Apr 28, 2022 at 13:05
- 1 No, it isn't, you can have multiple entry points. The official routing library (as they say in the FAQ) is SvelteKit, which says: "All the SEO and progressive enhancement of a server-rendered app, with the slick navigation of an SPA" E.g., multiple entry points with SSR, etc. (Decided that an answer would go on to talk about how plugins for various bundlers also show that Svelte isn't SPA-only, but I don't have time to do that.) – T.J. Crowder Commented Apr 28, 2022 at 13:14
- Thank you for your answer @T.J. Crowder. As far as I can infer from the above answers and the documentation, Svelte was created with SPA in mind, but SvelteKit, on the other hand, provides dynamic routing and also allows for the creation of MPAs. – Uros C Commented Apr 28, 2022 at 13:20
- I don't think that's correct. I think Svelte, itself, is fairly ponent-focussed and not specifically SPA-focussed. Note that both Svelte and SvelteKit were created by the same person. – T.J. Crowder Commented Apr 28, 2022 at 13:26
- 1 SvelteKit is to Svelte what NextJS is to React and Nuxt is to Vue, if you are more familiar with those frameworks. However, there are also modules like svelte-router-spa available to add client-side routing to Svelte apps, in similar fashion that react-router adds client-side routing to React. – Thomas Hennes Commented Apr 28, 2022 at 16:31
3 Answers
Reset to default 5Is Svelte Limited to Building Single-Page Applications?
No. Svelte is a way of building ponents. Svelte piles to vanilla JS classes so you can easily include it as a small ponent doing something specific on a page or as a ponent that acts as a full page in a MPA structure (both initiated at runtime).
Can It Be Used for Creating Multi-Page Applications (MPA)?
Not with Svelte directly (since it just produces ponents) but it is possible with SvelteKit. I honestly thought that SvelteKit was a SPA framework (because it behaves like one) but apparently it does create real html entry points for all your routes. After the initial page load it just swaps out the parts of the web page that needs to be updated and no more full page loads are done hence the quick navigation speed and you get the benefits of server-rendered MPAs as well!
As you've already noted, Svelte is wonderful because it piles into vanilla JS. Therefore, you can use piled Svelte to replace even existing vanilla pages. Although I haven't tried it, I would imagine it works with Express if you want to use that. As pointed out by cascading-jox, SvelteKit is a neat integrated method to route your pages. Documentation for it seems to make it look quite similar to Next.js routing.
Just for sake of pleteness, I use this one Svelte-MPA
So any server-side language (for example using ZTemplate) will inject the json for generated html from Svelte if need initial data, if not, you can just create a .svelte file (page) and it would generate html on build/watch, for any other .svelte file that started with underscore or in folder that starts with underscore it would became a svelte ponent that can be imported by other svelte page.