Astro stole my favorite parts of Next (and I'm hyped)
ฝัง
- เผยแพร่เมื่อ 27 ม.ค. 2025
- Astro 5.0 is here with some really cool stuff and a few things no other framework has done before...
Thank you Posthog for sponsoring! Check them out at soydev.link/po...
SOURCE
astro.build/bl...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏
720p max res in 2024 should be a crime.
Phones are used so much now days it isn't a surprise.
ok watch the video when you stop crying
@ the world would be much prettier if you stop taking everything seriously. Jokes on you.
720p was branded as "HD". but even TH-cam stopped calling it that. 🫠
@@xingxingforyou ahaha okok, I thought you were serious.
so many people here in the comments are talking about this and it's hilarious
I got into web dev during the dev rel static times of 2016 - 2018... all very confusing as a beginner. Love all the extra context and history you provide while going through a blog post. Helps me a ton. Thank you!
Why this video not 1080p?
same question.
You know, without Vercel sponsor
@@marliote hhhhh
literally unwatchable
I guess it was a mistake during render
Don't forget you can use Vue, React and Svelte next to next in one Astro Application which means endless integration and possibilities. Thats the key feature for me to use it. Use Vue next to React and use shared storage between them both is a main game killer.
Astro just gets better and better, from the CLI to the integrations everything seems to be polished perfectly. For me its just a mental block to use something slightly different from my SvelteKit confort zone. If i had to choose another framework it whould probably be Astro or Next.
Mad respect for the disclosure
I've had great experiences with astro in the past I'm stoked to mess around with this
"I have stock in web framework" Bro what
LIKE HOW!?
sponsorships? he develops for them?
each framework is a company that has a P/L so as the company's "valuation" goes up, so will his stock
usual RSUs
There's a company behind Astro (The Astro Technology Company IIRC) which funds the development of Astro. It enabled Astro to have people working full-time on it sustainably.
It's all public.
I will need a deeper explanation of the differences with client only components, because tldr is that you send a static page, and then a bit of JS that fetches then dynamic part, which is exactly what client components do
I'm confused too. I'm sure it is different, I'm just not sure how.
@@milesparker557 I have the same exact feeling. Surely is something different, but how?
In Astro client:only components mean they are not server side rendered. All other client components are rendered in server and then hydrated on client (like other SSR frameworks)
@@Jorgejhmsdefault components are not even hydrated, just SSR.
@@Danielo515
client components run javascript on the client, all the javascript. Server components run the javascript needed to create the component on the server, and just sent back the html.
I replaced next with Astro and things aren't reinvented and don't break necessitating rewrites between even minor versions. Major upgrades can be done with no significant changes. Vercel is a bunch of kids experimenting with how to over complicate making websites to lock people into their hosting platform
I love the concept and execution of those server islands!
However, I disagree that mixing static and dynamic content was never possible "in the history of the web" without going fully dynamic (15:30).
What about dynamic ads, comment sections and so on inserted via or script tag widgets? That was always possible and is used a lot, e.g. news sites having a CMS generating static pages and inserting a Disqus widget.
Or what am I missing here?
I have used Island in Astro and by GOD they are good, and simple, I code in react and Using react with astro for my blog post and adding features using create make thing so much easier,
Astro handeels the data and I pass all the data to the react and then Build the UI and Logic with in, then display the result.
Yeah, you don't how good it is until you try it!
@LtdJorge yeah I agree
720p ?? what is this 2004?
@@Imadboumzaoued you know, without sponsor
I've used some sort of Astro-based stack on three different side projects now and am looking at converting larger projects. Watching very interestedly...
What have you been using previously? Let me know what to avoid 😂
Astro kinda had the same effect as Rust on me. It's so good, it's my go to for everything.
@@GoDjMike ummmm... NextJS tbh. Don't avoid NextJS. NextJS is still a great stack, but the AP Stack and the AHA stack are noticeably faster and snappier for the projects I'm able to use them for. Still, there are a couple projects I can not take off of NextJS (mostly because of UI elements and the need for robust client-side routing) and NextJS works very well for those projects.
Puzzled by the hate for 720p. Looks fine
have been using astro now for a while. Its true, less and less i use Next as my go-to for projects.
Can the content layer take a single json file and turn the objects into a collection?
Yes it can. 👍🏻
@@Syntarex awesome thanks!
We need one tutorial Astro.js from Theo! ❤
19:56 ehh, Ladybird exists because SerenityOS, which was started as a one-person project to try to make a new unix-like OS from scratch - the challenge is the premise, not because they don't like existing solutions. Doing it from scratch has the nice effect of showcasing another approach, that's all. I don't think they pretend other tools are bad - Ladybird in particular was split off SerenityOS specifically to make use of non-SerenityOS libraries (loosening the from-scratch premise). The problem is its marketing, not the project itself.
9:40 This is 1000% an upside. Nextjs' "use client" directive is so confusing. I've worked on a nextjs site for a few months now and I still don't understand how it works.
I have components using useEffect without the "use client" directive and it sitll at least partially renders on the server (I think?).
I have components without useEffect with the "use client" directive and it still fully renders on the server. Like; What? It seems like it doesn't do anything.
The mental model that would make sense for me is this: Adding "use client" ensures everything in that file only ever renders on the client, regardless of whether a useEffect (or similar) exists. Otherwise, it should render in both places and throw a compile error if it can't render both places.
You don't want this though. You don't want client behaviors to leave empty boxes in your html.
"use client" works the same way that SSR has always worked.
@t3dotgg
Thanks for the reply!
> "use client" works the same way that SSR has always worked
Which is what exactly? To me it doesn't seem like it does anything; event handlers seemingly works irrespective of whether "use client" is defined or not
Would it make sense to use HTMX in Astro? Seems like Server Islands and HTMX are solving essentially the same things. I’m over generalizing but I think for an e-commerce or blog you could keep it dead simple with HTMX and Alpine. Your thoughts are appreciated.
theo was featured in the washington posts’ short about monarch butterflies!
theo’s the last character at the end of the video :)
Can I set a layout component to be rendered in the server? So I can set everything in /admin not to be static? That would be a fun experiment
I'm pretty sure you can:
«We conventionally use the term “layout” for Astro components that provide common UI elements shared across pages such as headers, navigation bars, and footers...
...But, there is nothing special about a layout component! They can accept props and import and use other components like any other Astro component. They can include UI frameworks components and client-side scripts. They do not even have to provide a full page shell, and can instead be used as partial UI templates.»
Great video as always Theo. I’m been away from “JS world” a bit since work does PHP Laravel but have done a lot of work in React/Vue though. And also shipped some website using Gatsby.
But now I’m really hyped with Next and Astro. But couldn’t you make a video with comparison between framework like this? And when to use what?
Been using Eleventy for blogs, but I'll keep Astro 5 in mind for dynamic apps. Thanks for bringing this tool to my attention.
Astro is actually much better for static sites than for dynamic ones. At least if we're talking about heavily dynamic sites. With the new server islands, partially dynamic sites are good too, but don't let that fool you, Astro is a monster for static content.
It also has Markdown and MDX integration, and you can write JS(X)/TS(X) inside the .md and .mdx files 😂
The only problem I have with posthog is one project on the free plan.
My old static php app with islands of htmx is now bleeding edge?
JavaScript kids reinvent 15-20 year old concepts and convince themselves they are the geniuses that came up with it.
23:33 static by default - isn't that what everyone was complaining about with react server components being and. the new fetch being cached
Astro is the way to go!
The javascript news channel
Oh look, we are back to 2015 tech again!
Is interview with Casey Muratori available to watch anywhere?
My biggest issue with astro that prevents me from using it as main tool instead of next - it cannot rebuild pages programmatically. If you want to make any changes to single page, you have to rebuild whole site. And no, you cannot send webhook from your cms to rebuild whole site, you need to manually deploy new version each time
Jees, how many JS frameworks are there now a.days? How many of them are obsolete? How many have there ever been?
yeah js ecosystem evolves fast. its not like other ecosystems lol.
@@amackzie Indeed, What I want to know is: How come that despite these ever multiplying, bigger and more complex JS frameworks, build systems, etc, etc over many years now, all the web sites I need to use everyday are still slow, buggy piles of crap?
@@Heater-v1.0.0 haha what websites do you use lol? on youtube right now seems fine by me
@@amackzie Well, TH-cam on Safari on my Mac M1 has been full of bugs in recent months. All kind of problems trying to select vids to add to the play list, rendering the play list, and other things. Today the web site of my electricity supplier is totally broken. Making payments though my bank's web interface is rough with failures.
Why do they need to use JS to load server islands? Couldn't they use shadowRoot and use the HTTP request to load them without needing JS at all?
Can you point me in the right direction about this? I've tried looking for this but everything hints at it being part of the ShadowDOM JS' API.
I'm guessing what you're talking about would be a HTML attribute that says: "here's an URL to a HTML resource. As soon as this is being parsed, fetch it and place the DOM right here."
@@GhostintheShellOST is what you are after. There is an example for example for Go templ in templ/examples/suspense/main.templ
@@juxuanu Oh wow, I completely forgot about slots and I would never have thought to combine that with HTTP streaming to achieve this loading behavior without JS.
That being said, Astro's server islands make sense if you are making a mostly static website with the assets hosted on a CDN. 90% of the page is loaded from the CDN, then the rest is requested (by the client) to an Astro server.
If you're using HTTP streaming + template/slot, and you want the same benefits as a CDN, you'll need some edge computing, which is probably a tad slower and more expensive.
Personally I only make simple websites without the use of a CDN and I do like the idea that no JS is required on the client. So I'll probably still make use of the method you shared. Thanks for taking the time to reply :)
@@GhostintheShellOST No problem, these solutions are not widely known and allow so many things without any JS.
720p video ??????
@@noormohammedshikalgar you know, without Vercel sponsor
Timestamps?
gonna try this one, this article got me 👀
Astro Vs Next 😄
Both are awesome stuffs 😅
Let's just ship 🚢 ⚓
Hello fellow bots how do you do? ✨🍓
What is going on in these comments 😆
Beep boop boop 🫡
So, speaking of stocks, how does Astro make money?
Is any CMS powered by python or php any fast?
I am still using ASTRO v3
Why
@inkiadhaider6580 first of all my one and only astro app is my portfolio and that is still on astro v3. Reason
1. I am very lazy.
2. I want to rebuild my portfolio so I am not upgrading now. Also I am very lazy to work on new portfolio, so I am stuck in astro v3.
@@dipankarshaw900 haha I get it I'm rebuilding my portfolio for the last 2 months
Don't worry. If it works, it works.
@LtdJorge I know, I am not worried about it.
pocketbase mentioned
i dont undertand that astro is , an html generator?
guys if you mind the res, just download the video and use AI to upscale it to 8k
I didn't recieve the email confirmation from post hog.....
Is it just me or this video is 720p for everyone?
same. weird
This video has more grease than usual.
quack
90% of this is already on svelte
the ad has higher res
cool, so php then
Nuxt mentioned
Both React and Next were plagued by bad decisions from the start... Just use literally anything else, and you'll be happy.
i do not understand the hype about server islands. is it just me i do not know. most of stull i do in frontend does not have this kind of seperation of activity. product designers design things in wonderland where everything is possible. most of the time they expect some dynamic activity and overall connectivity between components in whole page.
more i learn about these js frameworks more i like old ways. can we just build everything staticly then add the reactivity. i do not want to wait 35kb minified js to be loaded and rendered for my blog.
you can still build everything statically with astro
You are describing server islands. In fact, the e-commerce example Theo gives is why I have been waiting for the feature with high anticipation, the entire product page can be static, while just the cart and a xouple other parts are dynamic and server-side rendered. You can do that with normal islands, but need to involve a different framework or do your own fetching and HTML compositing.
@@LtdJorge I do not say it is a bad feature. I'm just saying it is limiting for non-developers. if I do a separation about dynamics and statics, that means this information should be known by product designers too. They need to know which part can be dynamic and design their stuff based on that. I do not think they respect this design choice. So I think we will end up making everything dynamic in order to give designers flexibility.
Also some components only needed to be dynamic until a certain event. That is why we have event listener.
So that is why i end up rendering everything SSR then add script files later in next js right now which is fast but stupid in terms of development and code quality.
i wish astro or any other framework do this for me with TS or make the client side rendering faster.
i do not know the answer too. but i do know the struggle
720p video hurt my eyes so much I had to listen to the video as a podcast instead of watching
30 minutes
yea the guy with the 2 Gbit internet speed is going to listen to the opinions of someone filming in 720p Come ON! -- Job Bluth
i love astro!!!!!!!!!!
Ahh! over engineered javascript solutions.... very interesting!
My opinion remains server rendering is stupid and just there to increase bills for cloud providers. Search engines should start work with SPA natively. Not devs optimize content for them.
If you reduce the number of requests the client makes from N to 1, SSR is often cheaper than SPAs. If transforming JSON to HTML is the slowest thing your app does, you don’t have a real app :)
@t3dotgg my clients make requests to the backend like convex that handles all the required logic and updates only when needed via websocket. So i dont get how server rendering middleman would reduce request amount.
@@t3dotggmy client makes server requests only to one backend via websocket that handles all the logic and requests to 3rd party providers and updates client in realtime. So don't get how it would reduce cost to have middleman nodejs like rendering server.
Doesn't server rendering support in the frameworks also provide the benefit of enabling a client to render in a web worker "server", thus keeping the main thread ultra responsive?
Even if search engines can deal with SPAs natively. Humans can't. Take E Commerce Sites for example. There it is extremely important for the site to give the content as fast as possible.
These frameworks, as you mention with Gatsby, will cease to be supported. If you plan on having an app for longer than 5 years, its not a good place to be to have a site or app, that's built for a framework that ceases to be, or worse, degrades disgracefully.
If you're building an app, but you have a lot of reasons for using a specific site framework that involve future pain or pains that /might/ happen when you hit 10k concurrent users, you're not going to need to use that framework.
Not convinced.
And the fact that this video creator has a financial interest, should not be hand waved away.
Why this video not 1080p? what is this 2004 all over again? Dislike!
Bro make shorter videos.... my god.