Astro: All-in-one web framework designed for speed
astro.build
astro.build
Astro is a JavaScript framework for building content-heavy websites, like blogs and e-commerce stores. It can be used as a static site generator or rendering pages dynamically on the server, or a mix of both. You can use it with any JS framework — React, Svelte, etc — or none at all.
By default, there is no client-side JS.
Just like in the PHP 5 days
We get first-class speed and assets optimizers for free!
There are many static site generators around. Is there something that makes Astro special or different? What is its unique selling point?
Essentially it only pulls in the JavaScript it needs to make an element interactive; you can mix frameworks on the same page, and it's very fast.
With that said, from my experience with ASTRO is very similar to say vue or svelte in how you structure the code and template which I've come to like a lot more than jsx.
The biggest negative are more that if you do use other front-end library, you end up with two layers of where bugs can appear (astro + front end).
Also getting custom library express reliant stuff was a non starter for me at least.
Sure it makes sense if you're building a store or marketplace that needs to be publicly indexed, but for most web applications SEO is only important for landing page.
Vite, an API service of your choice, and a static hosting platform is pretty much all you need for web apps.
It’s actually a big reason why I’m building https://pgs.sh — to cut through all the fat of publishing web apps. This doesn’t have to be anymore complicated than adding a public ssh key for production features.
It’s still not possible to do partial hydration with the majority of popular frameworks, Astro brings that back.
* sites that should’ve been static but were built as an SPA
This is the hype train forgetting where the data comes from. I’m pretty sick of it actually. This isn’t all in one, unless you’re thinking about all your frontend dependencies being able to be built together. It completely neglects these aspects of web dev:
- Security (the biggest one)
- Data exposure APIs (how do you expose and query your data? If you say flat files, I’m ashamed).
- Real-time is completely missing.
- still relies on other frontend frameworks like Svelte or React.
So, what, exactly is Astro other than YACC like Vite? And why do frontend devs insist they have an “all-in-one” framework when they clearly don’t?
It doesn't have to. You can use it without any frontend framework.
> So, what, exactly is Astro other than YACC like Vite?
Selling point of Astro is the partial / conditional hydration; they call it Island Architecture. This is not unique to Astro, though[1].
It also does some neat stuff with frontmatter [2].
The biggest turn-off for me though is that telemetry is ON by default and you need to manually switch it off.
[1]: https://github.com/11ty/is-land and https://github.com/ElMassimo/iles also offer Islands.
[2]: https://docs.astro.build/en/guides/content-collections/
Thus defeating it's claims to be an all-in-one framework. It should instead say "non-opinionated" framework.
Also, the frontmatter, this is exactly the kind of stuff that should be data driven, the kind of stuff an "all-in-one" framework would fetch from a data source, be it an API or a REST integration with a backend. This post on the deno blog explains it pretty well [1]. To me, someone who has been through the web 1.0, web 2.0, from notepad to IntelliJ/VSCode, an "all-in-one" framework handles:
- Security (authentication/authorization/using-standards)
- Content (bundler, rollup, however you need to figure it out. web fonts, icons, images, video, sass, less, css, jsx, js, tsx, ts, coffeescript... (sorry @jashkenas))
- API's (I need to provide data to my app beyond what you hardcode in a json, and don't make me fetch across origins).
- Data (I need to model my data somehow, and map that to my storage, or dependent apis)
- Real-time communications (I want to communicate between processes, between workers, between client and server, and between servers, beyond the long-poll).
- Simplicity (all of the above should be done in a way that makes it simple and easy to build web applications).
[1]: https://deno.com/blog/the-future-and-past-is-server-side-ren...
Before the crazy train of web frontend frameworks that promised to bundle all the things - there were a couple “all-in-one” web frameworks out there. Rails being one of them. That handled all of the above mentioned issues, until frontend went SPA/CSR crazy. Now we are coming back to the idea that SSR isn’t as bad as we thought it was. We can have our cake and eat it too with web components and hydration (silly rebrand of an old XHR html concept, but modern) and still have things like data modeling, API’s, security, communication, etc without having to farm it out across my domain origin.
I'm using Firefox.
In Chrome it's a bit better, but still not smooth.
I wonder what causes the lag - the page doesn't look complicated.
Anyone knows why? I was thinking about giving Astro a try but this looks like a deal breaker
Some rely on donations from companies that use their frameworks. Eg: Evan You (creator of Vue)
First, read a bunch of static text files. Throw them all into RAM. This is amazingly fast. If you include meta data in the files, you don't need a database or JSON index. I use my own HTML document editor so I start with that and use JSDOM to parse and add in stuff like scripts or tags, but if you're an MD fanboy, that would be just as simple. I then use an EJS template to update the index pages and an RSS library to crank out a feed and an exec call to sync to my S3 server with a command to cloudfront to invalidate the cache. Its not even slightly optimized, and yet I would have to have hundreds of pages for this to take longer than 30 seconds.
If you have enough JS knowledge to use Astro, then you've got enough to write this sort of script.
What frameworks would you recommend for building CSR apps?
Or you can try my toy one :D https://github.com/kevinfiol/umai
But it seems the frameworks around it are moving more and more into the SSR direction.
Astro is an SSR more tuned to generate static sites than SSR with hydration. It uses the islands architecture instead of full page re-hydration. So if you’re generating a static site with a few react components sprinkled in, it’s a good thing to use.
Because of the islands architecture, you can also mix and match component libraries. So one component can be react, one can be vue, one can be svelte, etc.
Next and remix are both less focused on SSG than Astro. A lot of people are making very content driven sites using react or Next—sites that aren’t really or shouldn’t be SPAs—and this is a great tool for content driven sites that don’t benefit from SPA-level interactivity (which is probably most sites using SPA frameworks)
The islands architecture is interesting but in practice I doubt I'd swap between multiple component libraries.
With the island architecture, it's not that you would switch between different architectures, but that you can choose which component framework you want to use on top of the same templating framework. Of course, you can mix and match, but that's not really the point.
Astro is actually an MPA that allows some client side components, so it only requires you to render on parts of the page. I prefer that for content heavy sites because I'm not sure how much interactivity I need.
I needed a project to really kick the wheels of Gen AI as a tool for executing projects. I compounded this choice, by asking a more experienced dev what tools he would learn if he got into web dev today. He suggested Astro and vercel.
Chat GPT ended up helping far less than promised. Also if you want to build a ship in a desert, its not going to ask why, its going to tell you how. Apparently doing design, code, content and art from scratch isnt the optimal way to go. Who knew?
I suspect its significantly easier to pick up if you are working on web dev every day. The point of jumping through additional hoops didn't make sense until it finally clicked. Once you wrap your head around it, your components start to just work. Ideally like lego. Does make maintenance and management easier.
Either that, Or I am simply sufferring from stockholm syndrome. I don't know.
I did wish there were more templates to learn from.
Not sure how astro handles middleware and cookies on the server side but SK's hook system is very powerful and intuitive.
https://calendar.perfplanet.com/2022/mobile-performance-of-n...
Proper benchmarks of Next would come from using the exact same site setup, the exact same resources served and comparing various sizes and complexities against other tools.
And I say this as a notorious Next.js (actually, *.js) hater.
One of those two things is infinitely more valuable than the other.
Or more simply: compare this to any other website using any other framework. Do you see similar trends ? Are they websites of the same complexity ? If so, why is your initial data set an indictment of Next.js, but not simply of the lack of care most web developers put in nowadays, coupled with "business needs" (read: Google Analytics) ?
Instead it's better to do synthetic tests and then deduce which performance metric is important for my website.
what about APIs, rendering engines, technology stack, replacement for next/image… the juicy stuff…
I can't comment on how they compare for more interactive app-like websites.
Unlike Next.js, Astro isn't shipping a tonne of JS to the browser just to display some basic content; it's really just HTML and CSS.
(To reiterate, this is a very simple content-based site)
https://nextjs.org/docs/getting-started/react-essentials#why...
https://astro.build/#:~:text=Learn%20more%20in%20our%20docs
Docs: https://developer.mozilla.org/en-US/docs/Web/Text_fragments
I wanted to refer to the "Full speed" section and ask why Nuxt has such a low score?
I hope this works anyway.
And the link totally works! (I have no clue on Nuxt though.)
Astro is an all-in-one web framework
powered by your favorite UI components and libraries
Are you not sure what a framework is? Or are you confused by there being different UI components and libraries?
Either way both are pretty easy to look up!
all-in-one (new oxford dictionary): "combining two or more items or functions in a single unit"
Astro
- can do SPA
- can do MPA
- can use a variety of different view libraries
- can write endpoints to serve any data
So is your ill-defined issue with "all-in-one" the fact that it doesn't support every single view library?
It also has an ability to mix and match components from different frameworks on the same page/site. I think this is mostly a gimmick though, no one should be pulling in multiple frameworks for a single page or site.
Astro is really, really neat, IMO and suitable for use cases that are content focused but still require encapsulated areas of interactive components.
here is the key page: https://docs.astro.build/en/concepts/islands
That second link is the only one I’ve seen that explains what Astro actually does.
hmm, doesn't look like so:
> Leverage Astro's unique zero-JS frontend architecture
combined with:
> Deploy anywhere, even to the edge
we could infer it doesn't run anything client side nor server side, so it looks like a neighbour comment would be right, this homepage is all about a fancy way of describing a static site generator?
And this page is a very poor sales pitch in that regard.
I have an entry-level iPad from 2018 that crashes on most media-heavy websites, though I also blame Apple because it is obvious that every iOS release uses more and more RAM than the previous one. CPUs don't get slower as they age, but it certainly feels like it!
It is indeed one of the worst optimized CSS I've seen in a while. Weird for a project that is all about speed.
The docs site from the Get Started link scrolls fine.
I’ve used Astro years ago, Astro+Solid is one of the best combo for building fast sites, I would choose that (or Sveltekit) over the trashy React any day if I would have to choose, or better, no javascript at all.
HN gonna HN.
> I’m assuming most are React devs ... hating
> ...
> I would choose that ... over the trashy React
The irony is palpable!
If I got a penny for every time someone points out an “irony” when it isn’t.
Hating on a new tool right off the bat without going on an extensive testing because you feel “threatened” that your knowledge in the old tool won’t be needed anymore, isn’t like when you (or in this case myself) dislike the old tool because of how cumbersome it is after actually using it for a while, and you try to avoid using it as much as possible. The only reason React is still around is because it’s popular and mostly are looking for jobs, but it’s definitely not the best nor the fastest out there.
I just don't agree that it's React devs being curmudgeons, I think that's just HN being HN.
So to me, your feelings are ironic, maybe in an Alanis Morissette type of way.
I’m unhappy to see HN become a place where people just promote their projects, but it’s good if those projects are technical and novel. Another web framework isn’t, especially when the homepage clearly aims at the purchasing department, offers no technical details and the framework itself is built by people who don’t know how CPU cache works, but still like talking about “performance”.
In two weeks nobody will remember this exists and everyone will fawn over the next web framework. When that happens, can we please not have it on the front page again?