If you're digging Astro, I'm working on a course to teach you how to handle all sorts of production use cases with it. Sign up for updates at astro.party !
@TerriTerriHotSauce8 ай бұрын
Please compare it to HTMX.
@learnwithjason8 ай бұрын
@@TerriTerriHotSauce HTMX works really well *with* Astro, actually! I went over it with @jherr in this video: kzbin.infoC5DHnG8W0ts?si=bWoVRzz-NItZjq3w
@michaelandreuzza7 ай бұрын
the website is legit Jason.
@hcx18538 ай бұрын
Cool to watch Like Button group in the video control bar light up as Jason says 'Like Button' in the video. 1:00
@aldoxo969 ай бұрын
This is THE way you explain things! Thanks for such great content Jason
@yucelmutlusoy8 ай бұрын
Astro is freaking awesome, they definitely spotted an underserved segment. Congrats and many thanks 👍
@JEsterCW6 ай бұрын
Astro to me is the most revolutionary technology in web/front ecosystem, it's really unique and it acts like: *"Do whatever you wan to, I'm here to support you no matter what"* when in other cases you always have tons of rules or limits and astro is incredibly open-minded and flexbile + tons of configurations. The fact that we can mix react component with other tools components in one place without any headache is crazy to me cuz we can build specific part of our project in react, other one in vue and the 3rd one in plain html css and we can mix it together and it gives me such a huge microfrontends vibes, altho i dont use astro on daily basis, it's my favourite technology in web/frontend ecosystem and next to it stays tailwind and alpine, really lovely, but I'm kinda scared that vercel will destroy astro somehow, anyways i cant wait what more will come from astro, its defo the default pick for any web, especially static one, no reason to use plain vite with css and html, it doesnt makes sense when we got astro and we can build components, layouts and other stuff, amazing!
@davidsiewert86499 ай бұрын
Everything you said applies for Qwik as well * It ships nearly zero JS by default (same as in astro, because if you have a dark mode toggle -> it needs to execute JS before rendering to prevent a white flash) * It can be used for content heavy sites * It is even better in a way, where it only ships JS then clicking/hovering a button * But I quess its a little more complex
@learnwithjason9 ай бұрын
I love Qwik! there’s a live show coming up where Steve from the Qwik team will join me to show off their Qwik+Astro integration
@JamesQQuick9 ай бұрын
This was a fantastic video!
@learnwithjason9 ай бұрын
thank you!
@rheavictor78 ай бұрын
Dude you I just got to your channel after studying more about Astro (I'm designing my first landing page on it to test it), and what an amazing explanation. Thank you so much for how you put things clearly, straight to the point but given important context. Thanks.
@user-ik7rp8qz5g9 ай бұрын
Next has two things for static sites that other tools dont, and after trying which it feels really strange to work with other tools. It is caching (+ deduplication) and revalidation. Imagine this use case: you have cms and you want to update one particular page in your fully static site. - Next? Very easy, just send webhook from cms and page is already updated for you. - Astro? Well, good luck with that. Either you have to make it dynamic page and implement caching+revalidation yourself (which, even with perfect implementation, is still inferior in terms of speed) or you have to rebuild whole app manually after each change in cms.
@learnwithjason9 ай бұрын
this is very much My Opinion, but manually managing caches is a recipe for pain always and a disaster if more than one developer is touching it. I've already found subtle ways that Next's caching breaks sites or delivers incorrect data using just their defaults. I understand why people like the idea, but I don't think it survives contact with reality unfortnately
@user-vk9ff9gr4x15 күн бұрын
Wouldn’t you have to do that anyways if you’re hosting with Netlify and pulling from a repo?
@user-vk9ff9gr4x15 күн бұрын
Very well explained. Hugo and Gatsby was the reason I never went with the static site generators. But pushed me into wp, and got me to play around with grav then publii. I’m really looking forward to digging into Astro.
@blokche_dev9 ай бұрын
Astro and Svelte(Kit) for 2024 🎉
@learnwithjason9 ай бұрын
I do love Svelte
@RodrigoDAgostino9 ай бұрын
You said it! 👏🏻👏🏻👏🏻
@jamievaughn98457 ай бұрын
The beauty of astro is that if it's your foundation then that makes choosing the additional CSR/SPA framework like svelte or react or solid is basically a zero-weight commitment. You could use all three on different pages and it won't hurt your app performance or even your bundle size. It's such a unifying framework, that any other framework can freely come and/or go on top of it.
@adreto29782 күн бұрын
The unemployed tech stack
@aschmelyun9 ай бұрын
First video I’ve seen on Astro that really made me want to try it out. Great work!
@AntonEmery9 ай бұрын
I've been rebuilding a website in Astro, and loving it so far. Will definitely check out your course.
@codewithguillaume9 ай бұрын
That is a very good to watch Jason, thanks. I totally understand your point of view - I think right now, in dev's mind, Astro is just made for static, not dynamic. They communicated so much on this, that it's good to make clear you can do DYNAMIC with Astro (hybrid mode).
@clarkio9 ай бұрын
💯 such a great explanation of this space and advice for folks. Thanks for this video 👍
@learnwithjason9 ай бұрын
thanks for watching!
@Mental19937 ай бұрын
Plus Astro uses the View Transitions API which is a cool new - experimental still - feature
@sahilahmed30669 ай бұрын
I like astro because, every html i drop into the apps folder it works its the best and timeless js framework that ships html first 🥇!
@naranyala_dev8 ай бұрын
Just a few years from the first version, it revolutionized. Imagine five years from now, even ten years from now
@JLarky9 ай бұрын
Important part that was shipped in Astro 3 is that now you get HMR in React 🤯
@rahulbismarck4 ай бұрын
5:47 I posted a screenshot of your statement on my instagram today, with a note telling me to look back at it in 5 years. I'm pretty sure you're right.
@arminunruh4528 ай бұрын
but nextjs does ssg out of the box too since recently. and you use „use client“ inside a component or page to make it interactive.
@learnwithjason8 ай бұрын
I'm excited to hear that. does it work anywhere other than Vercel without needing a bunch of manual config?
@arminunruh4528 ай бұрын
@@learnwithjason yea!
@theklr9 ай бұрын
I’m fighting to get Astro buy in in more places. Thank you for giving me a succinct video to spread the gospel
@owenwexler7214Ай бұрын
I'm really liking Astro/Preact or Astro/HTMX for smaller side projects. My larger app, this stack is unfortunately a nonstarter for because you can see JSON data/raw object data in the astro-island props and my larger app is an aggregator app in a competitive space with a lot of copycats and making our raw data visible is not an option (we specifically spent time upgrading this app to Next /app router for this reason). Definitely would use this stack for certain other use cases though.
@learnwithjasonАй бұрын
fwiw you can server-render Astro pages to avoid passing data in - same general flow as Next or other frameworks. they have both a "server" output which is all SSR, or a "hybrid" output that defaults to prerendered, but you can opt into SRR using `export const prerender = false;` in the frontmatter of the page
@furycorp9 ай бұрын
I ate a chunk of my own time to migrate a primarily static (with some dynamic) content-focused client site from NextJS to Astro when NextJS started getting all incomplete-paradigm-shift-a-week with their devs and I haven't looked back I use Astro all over the place now.
@Goyo_MGC8 ай бұрын
Extremely clear and instructive ! Great video !
@friendly__drone93527 ай бұрын
Love these types of videos!
@NeverCodeAlone5 ай бұрын
Very nice inspiration. Thx a lot!!
@AnthonyCandaele7 ай бұрын
have you used Astro in combination with a CMS? If yes, what was the CMS?
@learnwithjason7 ай бұрын
I currently use it with Sanity on my site, but any headless CMS will work!
@geekySRM9 ай бұрын
nice explanation!
@danielkurz78062 ай бұрын
I've always wanted to use Astro for more complex apps instead of Next, but I've been hesistant because of their claim of being focused on content sites. What would you consider a feature / functionality of Next where you would be better served than using astro, if you were building Facebook? 😊
@learnwithjason2 ай бұрын
I'm not sure there's any app where I would use Next.js these days, honestly. too many weird gotchas and bits of magic for my comfort. I'm reaching for Astro or Vite + react-router (Remix) depending on the project's needs
@Joshua.Developer2 ай бұрын
The best framework.
@FalconTheFries8 ай бұрын
Astro and Solidjs is match made in heaven ❤
@tim_t9 ай бұрын
Heart still breaks for Gatsby. :-(
@Joshua.Developer2 ай бұрын
They fumbled, just add graphql to astro
@aidenberzins7 ай бұрын
I would still love to see a full-featured app built with Astro. Maybe Astro with API routes and Auth for 4 Devs 1 Project??
@learnwithjason7 ай бұрын
it's fairly simple, but I built an Astro app for this episode: kzbin.info/www/bejne/mGWri6Osa5aJZ7c it's got API routes, Clerk for auth, and a database for keeping track of each user's progress I do have more plans for Astro apps, both as part of 4D1A and beyond. stay tuned!
@aidenberzins7 ай бұрын
Awesome. I thought I had seen you build it somewhere didn't realize it was already in the 4D1A! Thanks for sharing it ❤ @@learnwithjason
@taquanminhlong9 ай бұрын
Astro are best with static sites, but not really a great choice for complex, dynamic data like table, queries, crud... Imo, but of course these still can be possible in Astro, however the effort taken compared to other ssr framework is not worth it
@learnwithjason9 ай бұрын
I think the latest improvements change that narrative a bit. I found myself struggling a lot more with the hidden complexities and non-standard features of Next more than I did with making Astro handle dynamic use cases. ultimately, though, the best tool is the one that makes YOU productive and gets the best outcome for the people who’ll use the thing you’re building - the tool doesn’t really matter except for the outcome it makes possible
@fernandobalieiro3 ай бұрын
Astro and angular for 2024
@GiacomoRebonato9 ай бұрын
I'd be happy to use Astro in my app to if they made it easier to integrate with a rest API framework like Fastify, Nest or others
@learnwithjason9 ай бұрын
could you say more about what you're running into? I'm looking for more video ideas and might put something together if you've got a use case 👀
@GiacomoRebonato9 ай бұрын
Giving more context and answering question: 1. You could build API endpoints in Astro and just get rid of your REST framework Yes, I know... with all the respect of the good work done on Astro, I'd still would like to keep the best practices and knowledge about my favourite HTTP framework. 2. You could build all your pages as pre-rendered static pages in Astro and then just serve them via your routes in the REST framework Yes... but I am aiming at a DX similar to the one that Next offers, where you have a monolyth (not a mono-repo) that runs both client and server. There are some attempt to re-use the running Vite serve to transpile also backend code (vite-plugin-node, vavite, @lomray/vite-ssr-boost) that I believe will give more freedom for handling these cases.
@rafaelrocha39912 ай бұрын
You can use api endpoints to handle form submissions for example and initial rendering of the page. For all other use cases ajax suffices or am I missing something? for highly interactive pieces of page the concept of islands allows you to build things in any framework you prefer in way akin to client components in react - which is also the only way to build highly interactive experiences with nextjs 💪🏼 Also tbh separating your FÉ from Pure BE is a good idea and I actually use turborepo to achieve this with a NestJS backend and tRPC and works quite well
@GiacomoRebonato2 ай бұрын
@@rafaelrocha3991 With monorepos and deploying separate apps we can achieve good setup, I am not going to argue on that. But we are moving away from a simple starting point that a monolyth offers, which is something that I like to have in my toolbelt. Something simpler also to deploy and monitor.
@techytimo7 ай бұрын
Hey, can you do the same analysis for htmx?
@rednibcoding34128 ай бұрын
Do you think astro is suited for building modern e-commerce sites/online shops ?
@learnwithjason8 ай бұрын
I do!
@KarimMaassen5 ай бұрын
Well said.
@DeffQ9 ай бұрын
Well explained
@avertry95298 ай бұрын
I heard page to page routing does a full refresh including nav-bar and to fill this gap they use page animations. If this is so, then it stops me wanting to use it. But maybe it's not as bad as I think.
@learnwithjason8 ай бұрын
you can opt into SPA-style routing if you want, which works more or less through the same mechanisms as any other client-side routing library. by default it's MPA-style (full page refresh). there are trade-offs to both solutions, so it depends on what you're optimizing for
@avertry95298 ай бұрын
@@learnwithjason Thank you for explaining Jason.
@TechnoTube0018 ай бұрын
What about SSG + some data fetching on client side, is it possbible? (no I can't do SSR because of shared hosting)
@learnwithjason8 ай бұрын
yes! you can use plain JS client-side to fetch, or you can bring in your framework of choice. the default rendering mode of Astro supports your use case
@nftsasha4 ай бұрын
how does it fit with htmx? that's what I'm using and it's great but I know nothing about Astro and curious if Astro would be easier or it's just you mix abd match kind of situation
@learnwithjason4 ай бұрын
it definitely depends on what you’re building. you can use them together: github.com/xstevenyung/astro-htmx - mixing and matching is definitely an option!
@zen-ventzi-marinov8 ай бұрын
What would you say, then, is the key difference between 11ty and astro? It sounds a lot like they both fight for similar use cases, though I haven't heard the same emphasis made for 11ty, I doubt that 11ty can't opt into some more dynamic stuff in a structured way.
@learnwithjason8 ай бұрын
11ty is great! I think it’s possible to do some of what Astro does in 11ty, but I don’t believe it’s a primary focus in the same way. I could be wrong though! I should check back with Zach and team
@zen-ventzi-marinov8 ай бұрын
@@learnwithjason I appreciate the response! It'd be interesting to hear since the description in this video is quite sharp and on point based on the sufferings of today's developers. It makes me wonder if I can get a similar quality comparison about 11ty vs Astro.
@tcurdt7 ай бұрын
Astro is nice and maybe some things work better out of he box - but 11ty feels more simple. Not necessarily in a bad way. I am personally still torn between the two.
@magne60498 ай бұрын
4:12 Best argument for Qwik. You don’t even need to think about static or dynamic portions of your page, and you send less JS, and don’t need to hydrate anything. I don’t get why anyone would choose Astro over Qwik? Qwik can even use the React ecosystem with qwikify-react.
@learnwithjason8 ай бұрын
Qwik and Astro work together. I've got Steve from the team joining in a few weeks to show how it works! check my upcoming livestreams
@magne60498 ай бұрын
@@learnwithjason yeah but unless you’re already locked in to using Astro, there’s arguably no point in using Qwik with Astro compared to simply just using Qwik City.
@learnwithjason8 ай бұрын
I think it depends on the use case. if I remember correctly, QwikCity doesn’t have a Markdown-as-page construct, right? so in many pages that really just need to display text (legal, privacy, etc.) I can see a good argument for leaning on Astro there, while using Qwik for the more dynamic portions. always depends on the project’s needs
@magne60498 ай бұрын
@@learnwithjason Yeah, that’s a good point. Markdown sites is likely the sweet spot for Astro.
@magne60498 ай бұрын
@@learnwithjason I just saw that Qwik seamlessly integrates markdown, and you can embed Qwik components in markdown files. So it seems to cover thst use case too.
@n8ged85 ай бұрын
Astro is like me - silently and economically overtaking the others (sitting confidently in their 250 HP SUV) in rush hour traffic with my small but sporty electric moped.
@codelucky7 ай бұрын
Could you help me decide between Astro and Remix for a homepage and web application?
@learnwithjason7 ай бұрын
it depends on what your success criteria are and what the skill set of the team looks like. both are very good tools. I lean toward Astro most of the time because it ships less overall code to the browser, but my skill set is also priming me to feel more productive in Astro
@codelucky6 ай бұрын
@@learnwithjason I haven't had the chance to try out Astro yet, but I really appreciate Remix's Nested Routing feature. Through 'Nested Routes', It allows for nearly every loading state to be eliminated, which is a huge plus. Most web applications fetch data within components, causing slower load times and potential issues. With Remix, data is loaded in parallel on the server and sent as a fully formed HTML document, resulting in a much faster and smoother experience. Does Astro have anything similar to Nested Routes to load the site faster?
@vlntsolo9 ай бұрын
Didn't find any selling feature when compared to Sveltekit, but I'm subjective here.
@learnwithjason9 ай бұрын
SvelteKit is very cool and I'm a big fan. I think if I was using Svelte daily I might feel differently correct me if I'm wrong, but there's no option in SvelteKit to ship no client JS if the page has no interactivity, right? you always get the SvelteKit bootstrap bundle?
@vlntsolo9 ай бұрын
@@learnwithjason that's true, it can be prerendered but there's still js modules connected.
@edgarasben9 ай бұрын
Does the new /app router and RSC ship that much client side JS though?:)
@learnwithjason9 ай бұрын
the demo from the Next team is shipping 327kB of compressed JS: app-router.vercel.app/ if that's what the Next team is shipping by default, I'd assume yes?
@edgarasben9 ай бұрын
@@learnwithjason Just checked my Network tab after wiping out all the cache, it's 92kB JS on a fresh Next install. It also works fully with JS disabled. So it's more of a progressive enhancement if a browser can load JS. Which is fair in the era of modern browsers. The reason I am choosing Next today, is the community and ecosystem. Also, no need to switch framework no matter what I am building. It scales smoothly from a small to big project. In the end, best to use what you're already comfortable with:) And I'm staying open minded going forward;)
@Soulis988 ай бұрын
Is Astro good for e-commerce development?
@learnwithjason8 ай бұрын
yes, in many cases. it depends on the specifics, but I have build ecomm sites in Astro and would do it again
@SMOKE31049 ай бұрын
Where can I get the Astro merch?!!
@learnwithjason9 ай бұрын
shop.astro.build
@sigreer836 ай бұрын
nailed it
@premjeetprasad86769 ай бұрын
isn't next14 SSR doing the same? by default every this is server rendered and then we can use 'use client' to make it client side, if I am wrong please let me know
@learnwithjason9 ай бұрын
as far as I understand Next still ships client-side JS in every mode, and it approaches defaults backwards in my opinion (starts with app directory, which has the most moving parts / required context to use safely)
@furycorp9 ай бұрын
Take a look at something like next-theme (popular way to implement dark mode on nextjs) -- hundreds of lines of code to deal with NextJS invented SSR server bullshit -- and it does what? **adds a class to the body tag**. In an Astro app, even a react one, if your framework getting in the way, write the one line of actual VanillaJS it takes to do that and job done. Astro so blatantly exposes the sometimes-hidden sinkhole of BS makework some of these frameworks create for devs.
@Jorgejhms9 ай бұрын
For me (using both on web dev) the mental model is very simmilar. Most components would be static and server rendered, and only the interactve ones would be send to client. I found Astro better for content sites (content collections are amazing) while i prefer Next for a fully dynamic site (like a dashboard)
@user-vk9in7qg4b8 ай бұрын
Hi Jason, i'm using Quasar in front and Adonis in back. Will i be able to use Astro as full stack in a "api like way"?
@learnwithjason8 ай бұрын
you can set up API endpoints using Astro for sure. if that's the only thing you're using it for, it might be a bit of an odd use case but nothing wrong with it
@user-vk9in7qg4b8 ай бұрын
@@learnwithjason well i'm using these two massive frameworks only because i lack the skills to "do it my self" I only use a small part of each of them and now i would like to have a full stack Astro app with static content as well as vue components and also the api directly in Astro with like Fastify/plain Node, postgres, drizzle orm, zod, redis, nanostore and what not. I would like to not have to keep up with all different releases in Quasar/Adonis and just focus on Astro changes. Maybe also Fastify if that is what i have to use for the api part?
@learnwithjason8 ай бұрын
@@user-vk9in7qg4b oh, gotcha! yeah, you'll be able to do this with Astro and simplify the stack for sure. Astro has API routes (docs.astro.build/en/core-concepts/endpoints/#server-endpoints-api-routes) which replace the need to use Fastify/Node directly, and you can access your DB/ORM inside those routes and/or in the frontmatter of your static pages. the Vue integration is great. and if you need any of your non-API pages to be dynamic, you can use Astro's hybrid mode to opt-in specific pages to server-side rendering have fun!
@user-vk9in7qg4b8 ай бұрын
@@learnwithjason thank you so much. I will start migrating my stuff and "add as little as i can" until i get all i need working. Fastify looks nice but again, i want to keep it with in Astro and not have to lean on external frameworks that i have to maintain. I'm now a paying member of your chanel "YPC.SMHK-W42Q-LDUW-A93Q".
@learnwithjason8 ай бұрын
thank you so much!
@ElNicopewpew9 ай бұрын
I will. When it becomes easier to use with sanity.
@learnwithjason9 ай бұрын
what are you running into with Sanity? I use Astro + Sanity for lwj.dev and I like it
@ElNicopewpew9 ай бұрын
I just feel its still kinda clunky to host sanity on the same url, and to get preview to work perfectly, maybe you could do a tutorial on your workflow with it?
@julo.parapente9 ай бұрын
If one wants to develop a full blown interactive application with state needed from one end to another (i.e. no islands if I understand correctly), how good is it DX wise, and performance wise, compared to NextJS, and Qwik? I have seen the recent Qwik integration, does Astro+Qwik stand its own against Qwik City for developping complex apps?
@learnwithjason9 ай бұрын
you can share state between islands (TanStack Query is great for this) or ship an embedded SPA. even in a full-blown interactive app, though, there are lots of things that fall outside of the app part (privacy, legal, about, the blog, etc.) that have me leaning toward embedding the "app" part as an SPA in Astro - because if it's highly dynamic, it probably won't work without JS anyways, and if it's changing for every user it doesn't make sense to make it SEO-friendly, so an SPA reduced complexity for maintenance without losing required functionality DX-wise, I'd say one codebase + less complexity leans in favor of Astro. Astro's performance baseline is higher than Next's and doesn't require learning the additional complexity of Next's custom implementations of things. I don't know how it compares to Qwik, though
@julo.parapente9 ай бұрын
@@learnwithjason I agree with most of the points, although I am more and more interested in Qwik which seems to have the same functionalities as any meta framework, with better performance than anything else, and probably with great SEO by default, as it is mostly SSR. Still Astro intrigues me a lot, so thank you very much for your answer!
@zugdsbtngizudsgbnudsdsoiu3 ай бұрын
Im no fan of Js on the server side but when reaching the point where you want to use a js fullstack framework youll need remix or nextjs anyways. If you site is static why use javascript in the first place? That sound like a lot of over engineering to me. Also Astro boasts about being content first but in the real world customers want to edit their own content and 99.9% of the time they are not programmers. If you tell them they have to type ### for a level3 heading in markdown they will tell you to f*ck of.
@learnwithjason3 ай бұрын
I hear you. fwiw any CMS can power Astro, so while Markdown is an option, it’s not required. I run my Astro site off Sanity, for example
@jerrytab42769 ай бұрын
Astro + Qwik🥳
@Pareshbpatel3 ай бұрын
{2024-05-22}
@ulrich-tonmoy9 ай бұрын
Today hardware is so accessible thats why client/dev doesnt care about extra things they are adding by default even though they dont need it (no optimization)
@TerriTerriHotSauce8 ай бұрын
Please compare this to HTMX.
@MarkVolkmann8 ай бұрын
Astro can be used as the server for HTMX endpoint. Astro pages can generate the HTML responses.
@KlausThePuss6 ай бұрын
astro marketing team is working hard with youtuber xD
@hellokooa4 ай бұрын
astro party has everything you said is a no brainer for you to build with astro but the website is built with next js, wtf 😂
@learnwithjason4 ай бұрын
the badass.dev team uses a template for their landing pages and they standardized on Next.js. it's not what I would have chosen but I'm also not going to ask them to overturn their whole process for me
@wentallout9 ай бұрын
soo... Astro is better than Svelte? doubt
@StefKrie9 ай бұрын
you'd use Svelte *in* Astro. You may compare SvelteKit with Astro.