Looking for a personal (Svelte) stack

While thinking about the different tools and frameworks I tried already, I came up with the following requirements today:

1. I'd like to use Svelte for interactive accessible experiences, but
2. I also want to integrate static site generation (SSG) as much as possible in regards to Sustainable Web Design.
3. Content Editors should have a nice backend dashboard experience, while
4. I (or a small dev team) has a good deployment and affordable hosting experience for the backend.

Additionally I want to focus on the frontend work and use most of the backend stuff out of the box (if possible).

A single stack for this would be awesome, but that isn't realistic. My general categorization by now is "Interactive multi user web apps" vs. "(More or less) static content projects".

Frontend

Regarding frontend tools I'll explore Astro, SvelteKit, 11ty/Eleventy, maybe some others.

I found a nice quote by navillus today regarding Astro vs. SvelteKit:

Our site was previously written in SvelteKit and, especially for being it considered beta, we were very happy with SvelteKit. The fact is, though, that webapp frameworks like SvelteKit, Next.js, and Nuxt.js are focused on building highly interactive frontends rather than mostly static sites.

Don’t get me wrong, SvelteKit earned its place at the top of my list when building large, dynamic webapps. But for most projects, I will happily build with Astro and sprinkle in Svelte components when needed.
https://navillus.dev/blog/converting-navillus-to-astro

There is also a comparison (written by the Astro team) regarding Eleventy/11ty vs. Astro. There is also Slinkity in the works as experiment to extend Eleventy

Btw: Make sure to follow RodneyLab for SvelteKit and Astro tipps.

Backend

Regarding backend tools I'm tempted to use supabase for multi user apps, but the pricing starts at $25/month. That's not affordable for personal hobby projects unfortunately (but I know that servers and team need to be paid as well). There is a Github issue discussing this: Please add new pricing tiers between FREE to 25$.

While NodeJS has Strapi or Directus as nice backend solutions, I'm still personally more comfortable with PHP hosting than NodeJS hosting, especially because PHP hosting for multiple projects is easier in the European Union and more affordable.

For content projects I'm currently looking at Kirby KQL (or other headless approaches for KirbyCMS).

WordPress (e.g. WPGraphQL) is still an option as well and the new Gutenberg editor provides a fast experience, but I experienced that it requires effort to use Gutenberg contents in the frontend (Kellen Mace has great videos about that: Gutenberg in Headless WordPress: Render Blocks as HTML
). And it doesn't stop here, because you have to decide which custom fields plugin (such as Advanced Custom Fields) you want to integrate, etc. etc. I miss the simplicity in all of this, although I really like the WordPress dashboard. More robust solutions will come up in future I guess, WPEngine provides multiple plugins and docs for example: Developer resources for Headless WordPress.

For multi-user apps Laravel Sanctum, Lighthouse for Laravel are options worth considering. I haven't tested them yet.

I already blogged about InertiaJS (To API or not to API... Svelte and InertiaJS (Laravel / PHP)), which is a viable option as well. Unfortunately - as far as I experienced it - Svelte is not the main focus of InertiaJS and therefore I found it hard to find good tutorials.

If you have any tips, let me know!

To be continued ...

PS: I forgot to mention that the stack should also work with PWA features such as Offline Capabilities (they're amazing once you understand how easy it is to configure them :-o).
PPS: Laravel Livewire seems like a nice framework to simplify things as well, but it seems incompatible with building PWAs and has no Svelte support (because it uses a different approach).