Skip to content(if available)orjump to list(if available)

Astro is a return to the fundamentals of the web

diggan

> Traditional frameworks hydrate entire pages with JavaScript. Even if you've got a simple blog post with one interactive widget, the whole page gets the JavaScript treatment. Astro flips this on its head. Your pages are static HTML by default, and only the bits that need interactivity become JavaScript "islands."

Back in my days we called this "progressive enhancements" (or even just "web pages"), and was basically the only way we built websites with a bit of dynamic behavior. Then SPAs were "invented", and "progressive enhancements" movement became something less and less people did.

Now it seems that is called JavaScript islands, but it's actually just good ol' web pages :) What is old is new again.

Bit of history for the new webdevs: https://en.wikipedia.org/wiki/Progressive_enhancement

hombre_fatal

You're making the opposite mistake: you're seeing someone's description of a tool's feature and confusing it with the way we've already done things without even checking if the tool is transformative just because it kinda sounds similar.

Astro's main value prop is that it integrates with JS frameworks, let's them handle subtrees of the HTML, renders their initial state as a string, and then hydrates them on the client with preloaded data from the server.

TFA is trying to explain that value to someone who wants to use React/Svelte/Solid/Vue but only on a subset of their page while also preloading the data on the server.

It's not necessarily progressive enhancement because the HTML that loads before JS hydration doesn't need to work at all. It just matches the initial state of the JS once it hydrates. e.g. The <form> probably doesn't work at all without the JS that takes it over.

These are the kind of details you miss when you're chomping at the bit to be cynical instead of curious.

zelphirkalt

What is the value in first sending dysfunctional HTML and then fixing it with later executed JS? If you do that, you might as well do 100% JS. Probably would simplify things in the framework.

Sending functional HTML, and then only doing dynamic things dynamically, that's where the value is for web _apps_. So if what you point out is the value proposition for Astro, then I am not getting it, and don't see its value.

gbalduzzi

Dysfunctional HTML in the sense that interactivity is disabled, but visually it is rendered and therefore you can see the proper webpage immediately.

Just compare the two cases, assuming 100ms for the initial HTML loading and 200ms for JS loading and processing.

With full JS, you don't see anything for 300ms, the form does not exists (300ms is a noticeable delay for the human eye).

With frameworks such as Astro, after 100ms you already see the form. By the time you move the mouse and/or start interacting with it, the JS will probably be ready (because 200ms is almost instant in the context of starting an interaction).

This is not new at all, old school server side processing always did this. The advantage is writing the component only once, in one framework (React/vue/whatev). The server-client passage is transparent for the developer, and that wasn't the case at all in old school frameworks.

Note that I'm not seeing this is good! but this is the value proposition of Astro and similar frameworks: transparent server-client context switching, with better performance perceived by the user.

blackhaj7

> you're chomping at the bit to be cynical instead of curious.

Nicely sums up a lot of interactions these days

skipchris

Agreed! Astro is fantastic, but the biggest barrier I had in learning it was getting my head around range of terms that developers who entered the workplace after 2010 have invented to describe "how the web works".

rubyfan

I really appreciate that innovation can sometimes reinvent things that exist out of pure ignorance and sometimes hubris. I’ve seen people turn mountains out of molehills that take on a lore of their own and then along comes someone new who doesn’t know or is a little too sure of themselves and suddenly the problem is solved with something seemingly obvious.

I’m not sure javascript islands is that but I appreciate a new approach to an old pattern.

chrisldgk

I agree with that it’s not a new concept by itself, but the way it’s being done is much more elegant in my opinion.

I originally started as a web developer during the time where PHP+jQuery was the state of the art for interactive webpages, shortly before React with SPAs became a thing.

Looking back at it now, architecturally, the original approach was nicer, however DX used to be horrible at the time. Remember trying to debug with PHP on the frontend? I wouldn’t want to go back to that. SPAs have their place, most so in customer dashboards or heavily interactive applications, but Astro find a very nice balance of having your server and client code in one codebase, being able to define which is which and not having to parse your data from whatever PHP is doing into your JavaScript code is a huge DX improvement.

diggan

> Remember trying to debug with PHP on the frontend? I wouldn’t want to go back to that.

I do remember that, all too well. Countless hours spent with templates in Symfony, or dealing with Zend Framework and all that jazz...

But as far as I remember, the issue was debuggability and testing of the templates themselves, which was easily managed by moving functionality out of the templates (lots of people put lots of logic into templates...) and then putting that behavior under unit tests. Basically being better at enforcing proper MVC split was the way to solve that.

The DX wasn't horrible outside of that, even early 2010s which was when I was dealing with that for the first time.

gbalduzzi

The main difference is as simple as modern web pages having on average far more interactivity.

More and more logic moved to the client (and JS) to handle the additional interactivity, creating new frameworks to solve the increasing problems.

At some point, the bottleneck became the context switching and data passing between the server and the client.

SPAs and tools like Astro propose themselves as a way to improve DX in this context, either by creating complete separation between the two words (SPAs) or by making it transparent (Astro)

leetrout

Bingo.

Modern PHP development with Laravel is wildly effective and efficient.

Facebook brought React forth with influences from PHPs immediate context switching and Laravel’s Blade templates have brought a lot of React and Vue influences back to templating in a very useful way.

Vinnl

Well, that's a way to manage server-side logic, but your progressively-enhanced client-side logic (i.e. JS) still wasn't necessarily easy to debug, let alone being able to write unit tests for them.

archerx

I remember when it was called AJAX. We have completely lost the plot.

0x445442

It's why Alan Kay calls our industry a Cargo Cult and says it's much more akin to the fashion industry than engineering.

zoom6628

Absolutely.

ksec

I remember it was called DHTML. ( And the code never works perfectly on IE and Netscape / Mozilla )

paradox460

DynamicDrive my beloved

nchmy

Htmx and, even moreso, Datastar have brought us back on track. Hypermedia + Ajax with whatever backend language(s)/framework(s) you want. Whereas astro is astro.

steve_taylor

Back in your day, there wasn’t a developer experience by which you could build a website or web app (or both) as a single, cohesive unit, covering both front-end and back-end, while avoiding the hydration performance hit. Now we have Astro, Next.js with RSC, and probably at least a dozen more strong contenders.

d42muna

WebObjects.

That is a perfect description of it, released 1996. So far ahead of its time it’s not even funny. Still one of the best programming environments I’ve ever used almost <checks calendar> 30 years later.

diggan

> build a website or web app (or both) as a single, cohesive unit, covering both front-end and back-end, while avoiding the hydration performance hit.

Isn't that basically just what Symfony + Twig does? Server-side rendering, and you can put JS in there if you want to. Example template:

    <html>
        <head>[...]</head>
        <body>
            {% if user.isLoggedIn %}
                Hello {{ user.name }}!
            {% endif %}
        </body>
    </html>
The syntax is horrible, and seeing it today almost gives me the yuckies, but seems like the same idea to me, just different syntax more or less. I'm not saying it was better back then, just seems like very similar ideas (which isn't necessarily bad either)

zelphirkalt

I find that syntax more palatable than what is going on in JSX to be honest. I actually like having a separate declarative syntax for describing the tree structure of a page. Some languages manage to actually seamlessly incorporate this, for example SXML libraries in Schemes, but I have not seen it being done in a mainstream language yet.

null

[deleted]

hasanhaja

> there wasn’t a developer experience by which you could build a website or web app (or both) as a single, cohesive unit, covering both front-end and back-end

How much of the frontend and how much of the backend are we talking about? Contemporary JavaScript frameworks only cover a narrow band of the problem, and still require you to bootstrap the rest of the infrastructure on either side of the stack to have something substantial (e.g., more than just a personal blog with all of the content living inside of the repo as .md files).

> while avoiding the hydration performance hit

How are we solving that today with Islands or RSCs?

steve_taylor

It can cover as much of the back-end that your front-end uses directly as you’d care to deploy as one service. Obviously if you’re going to have a microservices architecture, you’re not going to put all those services in the one Next.js app. But you can certainly build a hell of a lot more in a monolith that a personal blog serving a handful of .md files.

In terms of the front-end, there’s really no limit imposed by Next.js and it’s not limited to a narrow band of the problem (whatever that gibberish means), so I don’t know what you’re even talking about.

> How are we solving that today with Islands or RSCs?

Next.js/RSC solves it by loading JavaScript only for the parts of the page that are dynamic. The static parts of the page are never client-side rendered, whereas before RSC they were.

paradox460

WebObjects and ColdFusion come from the 90s

z3t4

The first web frameworks really got it right with stateless websites and server rendering.

api

This field (software) in general, and especially web stuff, has no memory. It’s a cascade of teens and twentysomethings rediscovering the same paradigms over and over again with different names.

I think we are overdue for a rediscovery of object oriented programming and OOP design patterns but it will be called something else. We just got through an era of rediscovering the mainframe and calling it “cloud native.”

Every now and then you do get a new thing like LLMs and diffusion models.

daotoad

Software engineering/development has had a long September.

https://en.wikipedia.org/wiki/Eternal_September

rambambram

This. So much this. I'm not even 42 and I feel old when I read stuff like this. Like you say, there's no memory in the web software field.

omnimus

Even if you are 10 years younger than you and youve been doing it webdev in your late teens you’ve seen like three spins of the concepts wheel to come back again and again.

api

Wasted effort reinventing things and rediscovering their limits and failure modes is a major downside of the ageism that is rampant in the industry. There is nobody around to say “actually this has been tried three times by three previous generations of devs and this is what they learned.”

Another one: WASM is a good VM spec and the VM implementations are good, but the ecosystem with its DSLs and component model is getting an over engineered complexity smell. Remind anyone of… say… J2EE? Good VM, good foundation, massive excess complexity higher up the stack.

aswerty

It's clear to me that the frontend conversation space is broken. Not even just the ecosystem being a mess.

Boiling down the conversation I see in the article, it just seems to be: the browser as a HMI vs the browser as a an application runtime. Depending on what you want to do one might be a better fit than the other. But the points it puts forward are fluff arguments like "it's a breadth of fresh air" or "it loads faster".

It's difficult to articulate the source of just how broken the discussion space is; nor have I made a particularly strong argument myself. But I think it's important to keep pushing back on conversations that position framework's like they are brands winning hearts and minds. Ala the fashion industry.

bob1029

> Ala the fashion industry.

The fashion industry is the best analogy I've seen so far for frontend frameworks. It's obvious that the amount of technical rigor involved with declaring something "content-driven" and "server-first" is approximately zero.

voat

Care to explain?

Astro is trying to position itself in opposition to things like Next.js or Nuxt wich are specifically marketed as application frameworks?

And the architecture is more suited to something like a content site, because of the content collections, built-in MDX support, SSR, image handling, and server routing?

nchmy

"Loads faster" is fluff? How so?

deltarholamda

Write some straight HTML pages and serve it from bog standard Apache. Heck, get really fancy and do some server-side includes for your CSS or something.

It's really fast, you can edit it with Notepad, and you can probably saturate your bandwidth with a consumer level PC.

It's fluff because, well, our expectations are so unbelievably low. By the time you've bolted on every whizbang dingus leveraging four different languages (two of which are some flavor of Javascript), your twelve page site takes a couple of minutes to compile (what?), and it chokes your three load-balanced AWS compute nodes.

Web applications are hard. I get that. Web sites? They were, by design, incredibly simple. We make them complicated for often unclear reasons.

I appreciate what the Astro folks are trying to do, and it's very clever. But your basic Web site need not require freaking npm in order to "return to the fundamentals of the Web".

aembleton

Astro will generate those HTML pages you can serve 'from bog standard Apache'.

You can then use all of those npm packages to do whatever processing on your data that you want to do to generate the content and the pages and then just serve it as HTML.

I'm a backend dev, but Astro is the first time a front end framework has made sense to me for years. It fits my mental model of how the web works - serving up HTML pages with some JS just like we did 20 years ago. Its just that I can have it connect to a DB or an API to pull the data at build time so that I can have it generate all of the pages.

nchmy

But astro literally generates straight html which can be cached wherever you want...

As for build time, I don't have a clue - I haven't used astro (and don't plan to. Datastar + whatever backend framework you want is better). But I'm generally in favour of the direction they're bringing JS frameworks.

teekoiv

It's baffling to me why more SSR frameworks, Astro and NextJS namely, can't adopt static pages with dynamic paths like SvelteKit. So for example, if you have a page /todos/[todoId] you can't serve those in your static bundle and NextJS straight-out refuse building your app statically.

Whereas with SvelteKit, it builds happily and does this beautiful catch-all mechanism where a default response page, say 404.html in Cloudflare, fetches the correct page and from user-perspective works flawlessly. Even though behind the scenes the response was 404 (since that dynamic page was never really compiled). Really nice especially when bundling your app as a webview for mobile.

littlecranky67

I partly agree with you, but it is a design decision that comes with a drawback. A URL /todos/123 cannot be resolved in a SPA in a hard-reload. I.e. if a user were to bookmark /todos/123 or press reload in the browser, the browser would ultimately ask the underlying HTTP server for that file. As you mentioned, you would need a 404 page configured to fetch that - but that requires a configuration in the HTTP server (nginx etc.). So you are not just a static html+js+css+images deploy, you always will need server support. Another issue is, that 4xx errors in the HTTP spec are treated differently than 2xx: most notably, browsers are NOT allowed to cache any 404 responses, no matter what response header your server sends. This will ultimately mean, those /todo/123 bookmarks/hard-reloads will always trigger a full download of the page, even though it would be in the cache. And again, you would always need support in the web server to overwrite 404 pages. While the current NextJS output can be just deployed to something like github-pages or other webspace solutions.

Now, these are just the limitations I can think of, but there are probably more. And to be fair, why "break" the web this way, if you can just use query params: /todo?id=123. This solves all the quirks of the above solution, and is exactly what any server-side app (without JS) would look like, such as PHP etc.

teekoiv

Interesting. You can set up the server to respond with 200.html as the catch-all so the requests would return 200. There was some issue with it—can't remember what—which is why I switched to 404.html. After the initial load though the subsequent navigations would go through pushState so I think they'd be cached.

But I don't see this is as big of a problem. With this I can switch and choose—SSR dynamic pages or use hacky catch-all mechanism. For any reasonably large site you probably would SSR for SEO and other purposes. But for completely offline apps I have to do zero extra work to render them as is.

Personally, I much prefer route paths vs query parameters not just because they look ugly but because they lose hierarchy. Also, you can't then just decide to SSR the pages individually as they're now permanently fixed to same path.

littlecranky67

I tend to agree that you could come up with a solution using server-side catch-all and custom 200/404 routes - and actually I do, as I use nginx with a single line of try_files customization. But this is optional. It shouldn't be required to mess with the server config, if you want a static deployment.

Besides, if you catch-all to a 200.html page, how would you serve 404s? Yes, you can integrate a piece of JS in the 200.html file and have it "display" 404, but the original HTTP response would have been 200 (not 404). A lot of bending web standards and technology, and I can see how framework authors probably decide against that. Especially given how much shit JS frameworks get for "reinventing the wheel" :)

dschuessler

Maybe I am misunderstanding you, but isn't this what Astro's `getStaticPaths`[0] function is for?

[0]: `https://docs.astro.build/en/guides/routing/#static-ssg-mode

threetonesun

I think since they used [todoId] in the example they mean a static page which does not exist at build time. Which both can do, it’s called ISG (or on-demand in the Astro docs), but it requires a server to work, or you can create a static route that accepts any parameters and pass those to JavaScript to run on the client.

teekoiv

Yeah, what the other commenter said. getStaticPaths still requires you to define the rendered routes build-time

arminluschin

I’m also a big fan of static, and nextjs supports this: https://nextjs.org/docs/app/api-reference/functions/generate...

teekoiv

It doesn't. Those are executed build-time and you can't just set a wildcard so anything outside the given set results in 404.

As background, I wanted to make a PoC with NextJS bundled into a static CapacitorJS app somewhat recently and had to give up because of this.

You can try tricking NextJS by transforming the pages into "normal" ones with eg query parameters instead of path, but then you need complicated logic changing the pages as well as rewriting links. As you of course want the normal routes in web app. Just a huge PITA.

littlecranky67

Not sure why you gave up. All you need to do, is use query params: /todo?id=123 and use `const { id } = useSearchParams()` in your code. Yes, the urls won't be that pretty, but I don't know if this is a road block. I have a NextJS webapp up and running that is 100% SPA (no SSR, full static export) and uses a C#/.NET REST Backend for data [0]. Works (almost) flawlessly.

[0]: lockmeout.online

nchmy

I might not be understanding you (or the various frameworks) completely, but are Astro's server Islands what you're looking for?

https://docs.astro.build/en/guides/server-islands/

steve_taylor

You can indeed do that with Next.js. In the app router, it’s called generateStaticParams. In the pages router, it’s getStaticProps.

pheew

This isn't the same as getStaticProps is evaluated at build time not runtime

poushkar

I am feeling old reading the phrase "traditional frameworks" as a reference to SPA/Virtual DOM frameworks all while the actual traditional frameworks like Backbone, jQuery, etc. actually worked the way described in the blogpost.

diggan

"Traditional" always been a measure that depends on when we were born. "Traditional" internet for me is 56kbit modems, vbulletin forums, GTA:VC modding and IRC, while for older people "traditional" internet is probably BBS and such, and for the younger crowd things like Discord is part of the "traditional" internet.

You see the same thing in political conservative/traditional circles, where basically things were good when they were young, and things today are bad, but it all differs on when the person was born.

coldtea

>You see the same thing in political conservative/traditional circles, where basically things were good when they were young, and things today are bad, but it all differs on when the person was born

when things decline that's still an accurate represenation, not just an artifact of subjectivity

sesm

I remember Backbone being pure SPA-focused with client-side MVC.

thibaultamartin

I can only approve. To me Astro started as "it's just html and css but with includes."

I used it for my personal website, and recently used it when reimplementing the Matrix Conference website. It's really a no-fuss framework that is a joy to use.

Among the things I love about Astro:

- It's still html and css centric - Once built, it doesn't require js by default - You can still opt-into adding js for interactivity here and there - Content collections are neat and tidy - Astro massively optimizes for speed, and the maintainers know how to do it - It had a very helpful devbar to help you visually figure out what easy fix can make your website snappier (like lazily loading images if it detects them below the fold)

For the "optimize for speed" bit, an example is that the css minifier cleverly inlines some CSS to avoid additional queries. The Image component they provide will set the width and height attribute of an image to avoid content layout shifts. It will also generate responsive images for you.

diggan

> - It's still html and css centric - Once built, it doesn't require js by default - You can still opt-into adding js for interactivity here and there

I've never used Astro so forgive my ignorance, but isn't that just creating a .html file, a .css file and then optionally provide a .js file? What does Astro give you in this case? You'd get the same experience with a directory of files + Notepad basically. It's also even more optimized for speed, since there is no overhead/bloat at all, including at dev-time, just pure files, sent over HTTP.

> an example is that the css minifier cleverly inlines some CSS to avoid additional queries

Is that a common performance issue in the web pages you've built? I think across hundreds of websites, and for 20 years, not once have "CSS queries" been a bottleneck in even highly interactive webpages with thousands of elements, it's almost always something else (usually network).

thibaultamartin

Fair questions.

For the first one, the main benefits of Astro over static html and css (for my use cases) are the ability to include components and enforce the properties that must be passed. A typical example would be [here][0] where I define a layout for the whole website, and then [on each page that uses it](https://github.com/matrix-org/matrix-conf-website/blob/main/...) I have to pass the right properties. Doable by hand, but it's great to have tooling that can yell at me if I forgot to do it.

Content Collections also let me grab content from e.g. markdown or json and build pages automatically from it. The [Content Collections docs][1] are fairly straightforward.

As for performance issues, I've spent quite a bit of time on the countryside where connectivity was an issue and every extra request was definitely noticeable, hence the value of inlining it (you load one html file that has the css embedded, instead of loading an html file that then tells your browser to load an extra css file). The same can be true in some malls where I live.

[0]: https://github.com/matrix-org/matrix-conf-website/blob/main/... [1]: https://docs.astro.build/en/guides/content-collections/

mbirth

Embedded CSS circumvents proper caching of the CSS. Also, with HTTP/2 your client can download several resources in one transaction. So, it shouldn’t make much of a difference with CSS embedded or separate. Just, that embedded CSS has to be loaded over and over again whereas a separate file can be cached and reused from the local cache.

weego

My one criticism which is why I ditched it for now is complex routing gets confusing and abstract quickly.

I don't know that there's a serious solution to it because complexity can't come with zero friction but just my gut feeling was to back out and go with something else for now.

rasmus1610

I recently build a website for a medical practice using Astro.

I was amazed by how easy it was compared to my experience with Wordpress for this several years ago.

And I can host it for free on something like Netlify and I don’t need to worry about the site being hacked, like with WP.

I even built a very simple git-based CMS so that the client can update the content themselves.

Web dev has really come a long way, despite what a lot of people say.

ewuhic

Were you commissioned by a friend? How does one find a gig building a medical practice website?

rasmus1610

I’m a doctor myself and thus have contacts to people having medical practices :)

But at least in Germany there are some agencies doing nothing else.

steve_taylor

Be careful with Netlify. Their bandwidth charges are even more egregious than Vercel’s.

rustc

> Be careful with Netlify. Their bandwidth charges are even more egregious than Vercel’s.

$550/TB for those who want to save a search.

rasmus1610

Yes, good point. Although the traffic for these websites is so small, that I think I‘m good there for a long time.

throwaway77385

Until you get DDoS'ed and they won't let you set a billing cut-off -.-

kh_hk

To me no, it's not. It works well for some of the use cases, but if all you needed was offline rendering of your js in a build step to generate static html then you really didn't need all that js to begin with. islands work until they don't, and a lot of stuff gets inlined too. I guess it's fine if you stop caring about the final build.

I feel a lot of the hype around Astro has more to do with vite than anything else. And there yes, without doubt, vite is amazing.

rustc

> islands work until they don't

Like when?

mceachen

Not the op, but I’d guess islands become a PITA when there is user-visible state that must be synchronized and rendered coherently across multiple islands.

kh_hk

Setting `client:load` and `client:visible` for (svelte) islands you want to run on the client ends up inlining script type modules all around the html. It looked like a big hack to me.

On the positive side their use of web components is a nice bet.

rustc

And does it break something? I was replying to "islands work until they don't".

ttoinou

I spent a small amount of time looking into Astro and I didn’t get the difference with the Fresh framework created by the Deno team.. ? Fresh does this Island architecture already, and benchmarks on Astro website dont include Deno+Fresh to compare. So I’m still wondering what’s the benefit of using Deno+Astro vs. Deno+Fresh

niam

Astro and Fresh were both inspired by the islands idea which was iirc coined by an Etsy frontend architect and further elaborated on by the creator of Preact.

My understanding is that Astro is able to more-or-less take a component from any combo of popular frameworks and render it, whereas Fresh is currently limited to just Preact via Deno. I think the limitation is to optimize for not needing a build step, and not having to tweak the frameworks themselves like Astro does (did?).

I'm not affiliated; I've just looked at both tools before.

pier25

There are plenty of differences. Eg Fresh can only run on Deno and can only use Preact.

pjmlp

Fundamentals of the Web haven't gone away, anyone still coding across PHP, Spring, Quarkus, ASP.NET MVC hasn't noticed that much how bad things have become with JS frameworks.

Unfortunately in fashion driven industry, it isn't always easy to keep to the basics.

pentagrama

But it has a CMS? The author said that replaced WordPress sites with Astro, and on https://astro.build/ I see a comparison to WordPress.

Astro brings a friendly UI to maintain and update the sites? Like the WordPress panel and editor.

rob

It doesn't, which is why all these solutions breakdown long-term compared to things like WP for small biz brochure stuff. 5 to 10 years from now when you're no longer talking to your client who has absolutely no technical experience, they're not gonna know that their website code is in some random GitHub repository that needs to be compiled with vite and then you need to magically wait for Netlify/etc to pull in your changes. They'll probably be fuming they have to find a developer that knows how to edit and manage that compared to something like WordPress which is used for the majority of those websites.

pier25

It would be cheaper to hire a dev to update some content than to pay a wp host for 5-10 years.

abound

Not sure if anything major has changed recently, but I think you bring your own CMS. I've used Astro successfully with Strapi, for example.

Y-bar

If they need to bring in a CMS to edit content and juggle assets they could have used Wordpress in headless mode, which the customer was already used to…

Eg. https://www.gatsbyjs.com/docs/glossary/headless-wordpress/

donatj

The title change lead to a bit of an unexpected jolt, I assumed I'd clicked on the wrong link. I'm not sure where that falls on the guidelines though given the circumstances.

todotask2

Just curious if non-techy folks might ask whether Astro is reliable enough for production use, such as e-commerce, marketing sites, etc.