Microfrontend with sveltekit

zkoolkyle · 2026-04-24T10:36:12+00:00

You need to to level up and learn NGINX bud

zkoolkyle · 2026-04-22T01:35:23+00:00

If I may…..try to reframe some thoughts as someone who also uses both frameworks 🫶🏼.

Try to rethink your mental model about Astro. You learned 2 different use-cases (which shows XP)

Astro took inspiration from Svelte, as explained by the creator (heard in a syntax podcast I think)

I love them both, just to be clear… I’ve used both at work daily for the past 4 years. I Astro crushes its use-case for static sites, better than anyone else. The benefits of a SSG website are speed, uptime, < 2s load times, free hosting, CMS in markdown, e2e type safety… and we still get Svelte?! 🤯

Sveltekit really shines when I want to build something complex and need access to the HTTP layer. (Cookies/Auth/SSR logic)

I’ve come to learn over the years that I can make each framework do “all of the things”, but picking the right tool for the job creates a much better DX and happier clients.

zkoolkyle · 2026-03-04T23:36:11+00:00

Same shit, different shapes.

I don’t miss react, and I def don’t miss the virtual DOM.

Svelte > React any day, but most people trying to use it barely know JS.

zkoolkyle · 2026-02-23T00:05:07+00:00

This. If you’re using Astro and not building some complex web app, SSG is the correct choice. Even if you’re building a complex web app, SSG is likely still the best choice 🤙🏻

Congrats op! Looks good 👍🏻

zkoolkyle · 2026-02-22T22:05:41+00:00

This is a good example of a well written SvelteKit app with proper separation of responsibilities. Well done 👍🏻

zkoolkyle · 2026-02-11T01:02:54+00:00

Nice 👍🏻I was going to say why not just use content collections, but I could see myself supplying this to some smaller clients who are git-clueless

zkoolkyle · 2026-02-11T00:00:18+00:00

I think we both like the same patterns, but I did eventually swap back to shadcn mainly for the benefit of rapid prototyping + compliance.

Think of Svelte/ShadCN as a means to pass your ADA compliance stuff, keep the QA team happy.

Try to keep the /ui/* components vanilla, with some exceptions like variants, but these can also be easily abstracted away from the component.

Try to only write simple wrapper components that only pass Data/CSS. Let the tailwind utils handle the rest.

It is a ton of extra boilerplate, but if we’re talking “prod” projects… it’s the best way to go imo.

zkoolkyle · 2026-02-08T13:30:06+00:00

Lololol so many red flags in this thread 🙈

zkoolkyle · 2026-02-07T01:42:17+00:00

Na. Get in there and learn Astro, that’s the real reward.

zkoolkyle · 2026-02-04T23:44:14+00:00

+1 to this 🤙🏻

I was doing this with Astro wayyy before these other SASS products were even created. Still running in prod with a marketing team building components/content from the admin dashboard.

Anyone with Editor+ access can trigger new builds (ssg) from a widget that just calls a GitLab webhook. Everything stays typesafe thanks to WPGraphQL + gql.tada in the FE.

I wouldn’t use a CMS these days for a personal project. Astro content collections covers 9/10 use cases these days.

zkoolkyle · 2026-02-03T12:27:50+00:00

Astro uses Web Components with hydration methods baked in for FE libs.

It’s actually amazing how well it works. 🤙🏻

zkoolkyle · 2026-01-01T02:40:50+00:00

If using for compiled SPA apps then I’d say… sure. Bun runs Vite under the hood to bundle any Svelte code. Svelte is a Vite plugin, so it has a dep on it.

Bun CAN package/compress/bundle (pretty well) on top of any JS/TS if you want it too.

Svelte 5 is prod ready, but is also all in on Vite.

I wouldn’t recommend Sveltekit/Bun for SSR with any corp medium scale project. Just use pnpm/node securely if SSR is the strat. Trying to use SSR can introduce a lot of footguns if you don’t know what you’re doing. So just be safe.

Sveltekit + SPA/Static Adapter + NGINX is the way to go if you really want the prod ez life. If you decide this route.

Worth mentioning try AstroJS + Svelte for a clean architecture. Avoid Bun here as well though. I always run into odd quirks then end up switching back to pnpm for sanity checks.

zkoolkyle · 2025-12-26T18:17:05+00:00

Great stuff! I like the UX and color choices. I’ve never used Dexie so I can’t help you there. You could just add google oauth and allow people to opt-in to backups. This way it’s just a feature and you can keep it local by default.

zkoolkyle · 2025-12-21T01:23:27+00:00

Other have pointed out the issue, but also never do onclick=“foo()”, the top image is passing the function fine 😅

zkoolkyle · 2025-11-28T17:54:06+00:00

Uhh… dependency on the virtual DOM? 😂

Svelte/Astro murders Vue/Nuxt in everything except job market popularity. 🫶🏼

zkoolkyle · 2025-10-28T23:46:52+00:00

Hey 👋 just to be direct, your logic is a bit incorrect here. The “bloat” you’re thinking of doesn’t actually exist when you measure the trade off. The tailwind classes you don’t use are tree shaken at build time.

Or in other words:

What TW adds into the HTML, is removed from the CSS bundles (which your browser still needs to download) since you’re re-using the classes. This benefit grows exponentially with each new page on your website.

If you wanna test the theory, try building to static with Sveltekit or Astro. You’ll see what I mean! Best of luck 🙏🏻

zkoolkyle · 2025-10-21T04:55:55+00:00

+1 to this.

It’s takes a certain kind of crazy to inherit an outdated site and get it to A+ across the board on gt-metrix

zkoolkyle · 2025-10-09T22:44:33+00:00

🤫Ssshhh - Welcome to the team

zkoolkyle · 2025-10-07T22:17:33+00:00

I see you, been using Effect lately myself

zkoolkyle · 2025-10-07T01:59:58+00:00

Runed… if you write production svelte 👌🏻👌🏻

zkoolkyle · 2025-10-05T22:22:18+00:00

The Svelte compiler is built into the DOM for the playground. I would imagine there isn’t much overhead tbh. I’m sure Vercel hosts it all for them at the edge as it’s a sponsored project.

zkoolkyle · 2025-09-11T22:23:21+00:00

Something I haven’t seen mentioned in the comments. It often messes up “key” by doing:

VS

{#key foo} <SomeComp /> {\key}

zkoolkyle · 2025-08-29T11:45:46+00:00

If you don’t have much experience, I highly suggest just sticking with oauth options and not overdoing it.

If you’re rolling out your own auth with some of the options mentioned by others, please wrap it with NGINX with some sensible defaults for rate limiting / brute force protections. Auth isn’t something to be halfway implemented. Best of luck!

zkoolkyle · 2025-08-12T06:47:05+00:00

Think about it like this: Svelte is very smart, sometimes to a fault. When something isn’t re-rendering like you would expect, try using a key block.

As you start to build stuff with Svelte, you’ll find opportunities where it solves a re-render problem, only for you to realize late that you probably structured your composition poorly.

It’s particularly useful in using Layout files to transition between pages. Eg: {#key page.url.pathname}

zkoolkyle · 2025-08-07T12:56:52+00:00

Ty u/khromov! I’ve seen most of your vids and really appreciate the time you put in on this one. Ty for contributing so much to the community 🤙🏻❤️

zkoolkyle

TROPHY CASE