Choosing between SSR, SSG, and dynamic rendering in Astro
HTML-код
- Опубликовано: 28 авг 2024
- Join the early access list for my course! learnastro.dev
Astro offers several options for rendering, SSG, SSR, or a combination of the two in either direction (static-first or server-first) with dynamic rendering.
🔗 Key Links 🔗
- docs.astro.bui...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/mic...
- Theme: marketplace.vi...
- Icons: marketplace.vi...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...
this astro series is the best out there. saves me fumbling with the core docs. practical examples always help.
So glad you’ve enjoyed the videos!
I can never figure out how it all works. Through videos and diagrams it became clear. I'm waiting for a video with hybrid rendering! I liked the video 😇
So glad it was a help!
I really love how you explained things with drawing style like this, it really helped a lot. Thank you!
You're very welcome! So glad it was such a help!
Please continue this series. It's very useful and important for me. Thank you
Glad it was a help!
Best channel to learn Astro out there. Thank you for this stunning content!
Wow, thank you!
OK! Awesome video. Showing both the conceptual layout visually as well as code example reinforcing that concept and showing what changes.
Glad you enjoyed it!
Your teaching is always amazing!
Thanks for the kind words! So glad you enjoyed it!
Such a clear explanation! Thank you for taking the time to not only explain the theory, but to also illustrate it through a good example. I’m really enjoying your content! :)
You're very welcome! So glad it was helpful!
Thanks for this content and your time. Middleware examples would be great - perhaps authentication / authorisation how-to
Working on something right now that could use some middlewear…I'll see about figuring it out and doing a video! Thanks for the comment!
I have seen only some of your videos, up to now, I liked them all
Thanks, my friend. Glad they’ve been a help!
this was beautifully explained with diagrams. you are an amazing teacher 🎉
Glad it was helpful! Thanks for the kind words!
Unbelievable I didn't think to just build locally and look at the difference like this! Super clear information thank you
So glad it was a help!
just want to say a huge thanks for this video, it really helped me grasp exactly what adapters and SSR/SSG were doing because reading it in the docs it wasn't really sticking 😅
So glad it was such a help! Visuals are often what unlocks concepts for me, so I’m glad it was a help.
Visuals really helped on this one!
So glad it was a help!
Great video as always and yes please, we all want the video of Middleware and astro island!!
Fantastic explanation, thanks
So glad it was a help!
Wow! Thank you! Great visual explanation, please do more like that =)
Thanks, my friend. Glad you enjoyed it!
An absolutely fantastic explanation! Thank you
Glad it was helpful!
Amazing explanation. Really clear
Glad it was helpful!
Thanks for such an amazing explanation and this extremely useful video!
You're very welcome!
This is a great resource! Thanks a ton
Glad you enjoyed it!
Thanks, this was a pretty great overview. Simple and informative. Makes me look forward to using Astro in a project.
Glad you enjoyed it!
I love Astro. Your explanation is magnificent
Thanks for the kind words!
Very good explanation. Thank you.
So glad it was a help!
This video was so clear and I understood everything, thank you so much.
Glad it was helpful!
Great content! Love how you explain!
So glad it was a help!
2:54: Now that's a diagram that should be in the docs :)
Haha glad it was helpful!
thank you, so much, dude. great content, very clear, very straightforward.
So glad it was a help!
Vey helpful. Thanks 🙏🏻. Looking forward on your Astro course
So glad it was a help!
Love your Astro videos - extremely clear and step by step. There is one thing I cannot figure out - which is how to access reference() data from a collection properly . Maybe you could do a short video about it one day?
So glad you’ve enjoyed them. I think the content collections video should help with that (ruclips.net/video/zUmqmuSvJMs/видео.html). Let me know if you still have questions!
Excellent
Glad you found it helpful!
As always - great video Chris! Is there a way that Astro only renders "new" content? This would be really helpful in combination with a CMS: Let's say a client changes some text in the CMS and Astro does not generate the whole site, but only the text that was changed. Thanks anyway
Not to my knowledge. SSR or SSG is all at the page level (meaning you have to decide for the whole page). Perhaps in the future? I don't know if anyone even does that sort of thing?
Thanks Chris!
You’re welcome!
Hey! Love the content man. This was great to watch.
I’ve got a mostly static site I’m building in Astro but plan to use some React for components and some packages. Thing is React is quite heavy in size and I’m trying to keep it as light as possible.
Would I benefit from using SSR here at all to avoid React being called on the client side? (And avoid that 100kb load as it’s called and rendered on the server?)
You’re welcome! Well, if you’re using react, it’ll still load react on the page if you build it server side. You could use the client:visible directive to ensure the react only loads if people get to a section on the page that needs it?
I have been thinking about messing around with Astro for a while. I will be making the jump for sure after seeing this video. I love the illustrated visual aspect in this one. What program are you utilizing for the demonstration?
So glad it was a help! It’s called TLDraw, I think.
Nice video
Glad you enjoyed it!
I really like Astro, I have a question. What is Astro's current positioning? Is it SSR service or spa single page application or SSG? Where is the center of gravity of Astro? Thank you.
So right now it’s geared towards MPAs. While it defaults to using SSG, you can easily use SSR as I show here. You can create a SPA experience using react or something but at that point it would make more sense to just use Next or something that is react-only. I do have a few Astro sites with an admin section that is completely SPA in that route. I just use react router dom for that section to do all the internal routing. Hope that helps.
Fantastic explanation, thanks a lot. I wondered that if there is a way to implement /posts/[id].astro to support both SSG and SSR? Let's say I have 10,000 blog posts, and we only do SSG if id is
Not that I know of currently unless you picked off a few and had their blog layout wrapper set to prerender and the rest not? But they are working on ISR, so that would be the best solution. Hopefully soon!
Great video, can you make a video about foms with astro? Thank you
Glad you liked it! What would you like to know about forms?
Good video thank you, I'm wondering what diagram tool you are using?
Glad you enjoyed it! It’s called tldraw:)
@@CodinginPublic thank you, much appreciated
great
🙌
Thanks, very helpful, I want to know a litle about islands and midleware in Astro
Cool! I'll plan a tut! Thanks for saying something!
Really interesting video. I wonder what happens when you have a component on every page, a footer for example, that needs to be SSR. Is it still possible to benefit from SSG for the actual route no just SSR the footer?
Currently it’s all page level, meaning you have to decide SSR or SSG for an entire page. Perhaps there are plans to change that in the future? I'm not sure if any frameworks are offering that though?
Which UI framework deliver the less amount of JavaScript in your experience? I still can't make up my mind whether to use Preact or Svelte. But no Alpine as I didn't want to littering my markup.
I don't know that I have a recommendation between those two. I would guess Svelte? But that's merely a guess. I'd think both would be quite quick for most apps though?
@@CodinginPublicTrue, those are familiar with, I'm just so familiar with vanilla. If only we can solve the last piece of the tetris colors, the "red" UI framework being missing, no Ember or Angular. Maybe Astro should have one for client-side.
i think the diagram for const prerender is kinda opposite here? for SSG prerender should be true and SSR it should be false.
I don't remember what my diagram mentioned, but prerender only works when you're already in SSR mode (either "server" or "hybrid"). In that case, "server" makes everything NOT prerendered by default and you have to pass prerender = true to change that. "Hybrid" is the opposite. Hope that helps!
have you made astro work in old browsers using legacy vite?
I haven’t! What are your needs?
@@CodinginPublic When using Astro with vite legacy plugin, legacy scripts are generated in fact, but they do not get injected into page as Vite does when working without Astro. So my concern is having a non-running page in old browsers.
Correct me if I'm wrong but I really see no reason to ever use SSR on a SEO driven content website. You want your page to show up as fast as possible and no matter what your site is mostly static. The dynamic sections of your site can be hydrated...i see no situation where you'd want an entire page to be dynamically rendered. Even an order page would be better off as static site with a hydrated order section that shows the user that it's loading rather than take forever for the page to display. I feel like SSR is going to turn astro into something like next which is the wrong tool for most jobs
Well SSR is actually still great for SEO because the server still sends a full static HTML page. My default these days is dynamic mode where everything is SSG by default and only pages that REALLY need dynamically rendered because they change a lot should use SSR.
@@CodinginPublic but SSR is not good for SEO because performance related SEO is based almost entirely nowadays around FCP and LCP. SSR takes forever because you have to construct an entire HTML page and usually it isn't on a CDN (I think cloudflare has it on an edge server though).
Amazon needs SSR (ISR would be ideal) because every second they have a new product, but for anybody else jamstack is the only option I see making any sense. Especially since Astro supports islands, why not just have the pages all be static and then use islands in the minority of places that need dynamism? I've never seen a page, outside of an online video game, where 80%+ isn't static
My islands will be htmx LOL