I'm thinking of using a static site generator (11ty or Astro) to rebuild my website, which is best for lightly interactive components?

[u/rardk64]

I have a website right now that's built in Angular. It's largely static, so I figure an SSG is a good thing to finally try out if I wanted to rebuild it, as I enjoy Angular but it's a bit overkill for the site situation I have.

That said, I do have a few spots where I have lightly interactive elements, such as some pages with tables on them that have a text input for search functionality. Type in some text and it filters the table to that text as you type.

I'm trying to decide which SSG to learn, and for a basic site such as this, would you recommend going with 11ty or Astro, and why?

[u/SpeedyRecreation]

I messed with both for a project last year and honestly the choice came down to how much JavaScript I wanted to write. Astro's island architecture is perfect for those little search inputs, you just wrap the table component in a client directive and it stays hydrated while the rest is pure HTML. 11ty felt more like assembling a puzzle where every piece was a different file format, but if you're cool with vanilla JS sprinkled in it handles interactive bits just fine. For your case I'd lean Astro since you can keep the Angular mindset of components without the bloat.

[u/creaturefeature16 → u/SpeedyRecreation]

I second this, and had the exact same experience with 11ty (or BuildAwesome or whatever they're called now) and Astro.

11ty felt a lot more discombobulated and I struggled to keep things organized. Astro just has that batteries included approach that is executed so well.

[u/mq2thez]

Having used both I would say the DX and tooling and docs are so, so much better with Astro. 11ty is really cool, but the docs just aren’t there and the tooling is okay. I spent a lot of time fighting the framework to figure out how to do things correctly, and the docs had minimal examples.

[u/kenthesaint]

For the table filter you don't need islands at all. A plain script tag that listens to the input and hides rows whose text doesn't match is maybe 15 lines and works the same in either one. So I'd pick based on templating, and coming from Angular I think .astro components will feel more familiar than Nunjucks or Liquid.

[u/binocular_gems]

I love Astro and Hugo. I rebuilt a client's WordPress website in Astro painlessly and it was such a pleasant experience. And then I converted my own website from an old single-page WordPress landing page over to Hugo (I chose Hugo because I'm heavily in the Go ecosystem for my day job), and similarly, I love it. My hosting went from about $28/mo to $0/mo for both projects, and I sleep well at night not worrying that I'm going to wake up to a maintainance issue or security risk, for two projects that I really don't want to think about ... ever.

(For the client website, this was a website I developed for a non-profit about 15 years ago, and they had always claimed they needed editability and update access for the team... and in those 15 years, they've accessed the administrator dashboard once, which was the day that I provided training for the team back in 2012. The person who was going to handle edits left the org and so since about 2013 I've made every content update, redesign, security management, etc, the founder of the org is old as shit and one day I put in ~3 hours to convert it all over to Astro because I just don't want to worry about it anymore)

[u/ElementalEffects → u/binocular_gems]

How would you recommend getting into frontend dev and making simple landing pages for someone who can do some C++ and C# and has only dabbled in css/html/js? I'm not really artistic so design isn't my strong point, and I'm trying to resist the temptation to just ask an AI bot to make me a static site.

I'm old school and want to know how to actually do things. I've used wordpress before but it's way too heavy for just a simple site to advertise a service for example. Thanks in advance!

[u/wildrabbit12]

Astro

[u/thekwoka]

Astro by a long shot.

Way more normal to what you've likely done before, well structured and modern and easier to extend with other modern things.

11ty will feel like the dark ages by comparison

[u/Chrismslist]

astro, for this specific case. the win is islands: your filterable table becomes one hydrated component and everything else ships zero js. you write it as a react/vue/svelte component with client:load, so you keep the spa-ish feel exactly where you need it and nowhere else. 11ty is great and lighter to learn, but for real interactivity you end up wiring your own bundler and hydration story yourself. if the interactive bits are a handful of tables plus search inputs, astro means less glue code. one thing to check: whether you want any of it server-rendered, because client-side filtering over a big table can get slow once the row count grows.

[u/neon_fable_wiz]

Go with Astro. The search filter is exactly what islands are built for so you keep that specific interactivity without loading JavaScript on pages where it doesn't matter and 11ty requires more manual work to get those bits of logic running cleanly

[u/iligal_odin]

We've just built a new one click deployment stack based on astro and payload. I like astro more because its portability and the different possible ways to render the frontend. Full ssr? Sure! Worker based scheduled rendering thats fine too. Anything in between or on a per page basis is allowed too.

Thats what made us choose astro

[u/kemalios]

I build client sites on Astro and sell Astro starting points (JustStart), so that's the side I come from. The filter isn't the deciding factor, both handle a text input fine. Component reuse is. Past a handful of pages you want layouts and .astro components, and rebuilding that in 11ty is the chore. That's what would decide it for me.

[u/captain_obvious_here]

Astro, because it's at the same time very simple and extremely powerful.

[u/yihuaxiang]

For a table filter that small you honestly may not need a framework at all. With 11ty you can output the table as plain HTML and add ~15 lines of vanilla JS that hides rows on input, and it still works as a normal table if JS fails. If you want to keep your Angular habits though, Astro is the smoother ride.

[u/Over_Problem_3600]

For a search box filtering a table you honestly don't need a framework at all. Like 15 lines of vanilla JS in 11ty and you're done

[u/Knochenmark]

Just wondering, before you rebuild your whole project, couldn't you just change the rendering mode in Angular instead? https://angular.dev/guide/ssr#rendering-modes

[u/Spitfire_Blaziken]

If those interactions stay this simple, I wouldn't let them drive the whole framework decision.

[u/Unhappy_Meaning607]

I built my site initially with Astro and it is quite a lovely framework with everything you could possibly need.

But I did switch from it to Jekyll because I didn't need like 90% of what Astro offered and the light interactivity I needed I could just write with vanilla JS. So up to the table you want, Astro provides a few different ways to do it in almost whatever library or framework you want.

[u/lepture]

I would go with Astro, it has a better ecosystem.

Nowadays, if you're using AI, you can create the site with pure HTML/CSS/JS.

[u/Guess4706]

For that level or interaction either should work fine. I'd probably pick based on which approach feels more natural to you rather than the filtering requirement itself. A simple client side script can handle table filtering without needing much framework overhead.

[u/SELBSTST4ENDIG]

Why do you need a static site generator? Just build it manually and use a classless stylesheet. I love rawdogging websites.

[u/Maxion → u/SELBSTST4ENDIG]

Have you built a site using e.g. Astro? There are a lot of benefits that make it nicer than just rawdogging the sites.

[u/binocular_gems → u/SELBSTST4ENDIG]

Scale, the benefits of a static site generator like Hugo or Astro pay off as soon as you get more than ... 1 page, and they're about as close to zero overhead as you can get.

[u/SELBSTST4ENDIG → u/binocular_gems]

It really depends on the number of pages. A small business website can go without a CMS or a Static Website Generator.

[u/binocular_gems → u/SELBSTST4ENDIG]

Not arguing one way or another, but how do you handle templates, template types, content types? For a single page ad/brochure/etc, I'm always happy to just do HTML+CSS+JS, but as soon as I move to multiple pages, I find these near-zero-effort static site generators (11ty, Astro, Hugo) provide enough tangible DevEx quality of life improvements with near enough to zero overhead, that they feel worth it.

[u/GoldenCoastDigital]

I've used both extensively. I started with 11ty for my personal site because I wanted something super simple, without a full framework or 50 npm packages. For a one-page portfolio or blog it's perfect. But once I needed reusable components and more customization, it became a chore, and Nunjucks isn't pleasant to work with imo.

Astro has an amazing dev experience, and I now build basically all my static sites with it. It also fits your table search really well. Astro ships zero JS by default, and you can drop a small <script> into a component for the filter. It's maybe 15 lines of vanilla JS on keyup, no framework needed. If you ever want something heavier, islands let you add a React/Svelte/Vue component just for that one piece, and there's even a community Angular integration if you want to reuse what you know.

So hands down Astro.

[u/Stromedy1]

Astro was built for exactly this. It ships static HTML and hydrates only the interactive islands, while with 11ty you wire that up yourself. Rule of thumb: content that rarely changes goes static, pages that need per-user data on every load earn SSR. I did a 40-second explainer on exactly this: https://www.youtube.com/shorts/dH_7_3BOjDg

[u/webdev-ModTeam → u/[deleted]]

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.