Choosing between SSR, SSG, and dynamic rendering in Astro
Vložit
- čas přidán 7. 08. 2023
- 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.build/en/guides/se...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - Jak na to + styl
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 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!
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!
Please continue this series. It's very useful and important for me. Thank you
Glad it was a help!
this was beautifully explained with diagrams. you are an amazing teacher 🎉
Glad it was helpful! Thanks for the kind words!
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!
Your teaching is always amazing!
Thanks for the kind words! So glad you enjoyed it!
I have seen only some of your videos, up to now, I liked them all
Thanks, my friend. Glad they’ve been a help!
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!
An absolutely fantastic explanation! Thank you
Glad it was helpful!
Thank you for all your content man!
Glad you’re enjoying the channel!
Very good explanation. Thank you.
So glad it was a help!
Thanks, this was a pretty great overview. Simple and informative. Makes me look forward to using Astro in a project.
Glad you enjoyed it!
Thanks for such an amazing explanation and this extremely useful video!
You're very welcome!
Amazing explanation. Really clear
Glad it was helpful!
This is a great resource! Thanks a ton
Glad you enjoyed it!
Wow! Thank you! Great visual explanation, please do more like that =)
Thanks, my friend. Glad you enjoyed it!
This video was so clear and I understood everything, thank you so much.
Glad it was helpful!
Great video as always and yes please, we all want the video of Middleware and astro island!!
Great content! Love how you explain!
So glad it was a help!
Vey helpful. Thanks 🙏🏻. Looking forward on your Astro course
So glad it was a help!
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.
thank you, so much, dude. great content, very clear, very straightforward.
So glad it was a help!
Fantastic explanation, thanks
So glad it was a help!
Visuals really helped on this one!
So glad it was a help!
I love Astro. Your explanation is magnificent
Thanks for the kind words!
2:54: Now that's a diagram that should be in the docs :)
Haha glad it was helpful!
Thanks Chris!
You’re welcome!
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 (czcams.com/video/zUmqmuSvJMs/video.html). Let me know if you still have questions!
Excellent
Glad you found it helpful!
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.
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?
Nice video
Glad you enjoyed it!
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?
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!
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.
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.
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.
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!
My islands will be htmx LOL