Choosing between SSR, SSG, and dynamic rendering in Astro

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...

[@mrrolandlawrence]

this astro series is the best out there. saves me fumbling with the core docs. practical examples always help.

[@CodinginPublic]

So glad you’ve enjoyed the videos!

[@aryomuhammad8254]

I really love how you explained things with drawing style like this, it really helped a lot. Thank you!

[@CodinginPublic]

You're very welcome! So glad it was such a help!

[@unity_12]

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 😇

[@CodinginPublic]

So glad it was a help!

[@jamesgrubb]

Thanks for this content and your time. Middleware examples would be great - perhaps authentication / authorisation how-to

[@CodinginPublic]

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!

[@egrekov]

Please continue this series. It's very useful and important for me. Thank you

[@CodinginPublic]

Glad it was a help!

[@murtadha96]

An absolutely fantastic explanation! Thank you

[@CodinginPublic]

Glad it was helpful!

[@hiryuimajin]

Your teaching is always amazing!

[@CodinginPublic]

Thanks for the kind words! So glad you enjoyed it!

[@jmonterroso.dev13]

Great video as always and yes please, we all want the video of Middleware and astro island!!

[@systematicpsychologic7321]

Thanks, this was a pretty great overview. Simple and informative. Makes me look forward to using Astro in a project.

[@CodinginPublic]

Glad you enjoyed it!

[@21rogerwaters]

Wow! Thank you! Great visual explanation, please do more like that =)

[@CodinginPublic]

Thanks, my friend. Glad you enjoyed it!

[@veggtips.shorts]

Great content! Love how you explain!

[@CodinginPublic]

So glad it was a help!

[@JavArButt]

I have seen only some of your videos, up to now, I liked them all

[@CodinginPublic]

Thanks, my friend. Glad they’ve been a help!

[@rayusaki88]

Vey helpful. Thanks 🙏🏻. Looking forward on your Astro course

[@CodinginPublic]

So glad it was a help!

[@latch909]

Unbelievable I didn't think to just build locally and look at the difference like this! Super clear information thank you

[@CodinginPublic]

So glad it was a help!

[@user-fi7lb4oh2z]

Thank you for all your content man!

[@CodinginPublic]

Glad you’re enjoying the channel!

[@joshreynolds4164]

Visuals really helped on this one!

[@CodinginPublic]

So glad it was a help!

[@andrezorek]

thank you, so much, dude. great content, very clear, very straightforward.

[@CodinginPublic]

So glad it was a help!

[@Oggy-WanKenobi]

This is a great resource! Thanks a ton

[@CodinginPublic]

Glad you enjoyed it!

[@funkologie]

Thanks Chris!

[@CodinginPublic]

You’re welcome!

[@LeoMiranda]

Fantastic explanation, thanks

[@CodinginPublic]

So glad it was a help!

[@secondubly]

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 😅

[@CodinginPublic]

So glad it was such a help! Visuals are often what unlocks concepts for me, so I’m glad it was a help.

[@sujit_webdev]

Thanks for such an amazing explanation and this extremely useful video!

[@CodinginPublic]

You're very welcome!

[@oussamasethoum1665]

This video was so clear and I understood everything, thank you so much.

[@CodinginPublic]

Glad it was helpful!

[@akosbalint3485]

Very good explanation. Thank you.

[@CodinginPublic]

So glad it was a help!

[@sonny5497]

this was beautifully explained with diagrams. you are an amazing teacher 🎉

[@CodinginPublic]

Glad it was helpful! Thanks for the kind words!

[@RodrigoDAgostino]

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! :)

[@CodinginPublic]

You're very welcome! So glad it was helpful!

[@FumezCreates]

I love Astro. Your explanation is magnificent

[@CodinginPublic]

Thanks for the kind words!

[@christianseiler1250]

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?

[@CodinginPublic]

So glad you’ve enjoyed them. I think the content collections video should help with that (kzbin.info/www/bejne/sIbQoqCriNt9g9U). Let me know if you still have questions!

[@SalvaToroTorus]

Excellent

[@CodinginPublic]

Glad you found it helpful!

[@Web-Dev-Codi]

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?

[@CodinginPublic]

So glad it was a help! It’s called TLDraw, I think.

[@nickwoodward819]

2:54: Now that's a diagram that should be in the docs :)

[@CodinginPublic]

Haha glad it was helpful!

[@tiscover]

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

[@CodinginPublic]

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?

[@javayhu]

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

[@qasimarif9921]

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?)

[@CodinginPublic]

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?

[@sistana]

Thanks, very helpful, I want to know a litle about islands and midleware in Astro

[@CodinginPublic]

Cool! I'll plan a tut! Thanks for saying something!

[@nikkehtine]

Nice video

[@CodinginPublic]

Glad you enjoyed it!

[@ctrlteam5168]

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.

[@CodinginPublic]

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.

[@onorlidmedina]

Great video, can you make a video about foms with astro? Thank you

[@CodinginPublic]

Glad you liked it! What would you like to know about forms?

[@eannadefreine6671]

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?

[@CodinginPublic]

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?

[@user-bn5eb9um4x]

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.

[@CodinginPublic]

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?

[@user-bn5eb9um4x]

@@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.

[@richardramirez5746]

have you made astro work in old browsers using legacy vite?

[@CodinginPublic]

I haven’t! What are your needs?

[@richardramirez5746]

@@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.

[@inujung8224]

i think the diagram for const prerender is kinda opposite here? for SSG prerender should be true and SSR it should be false.

[@CodinginPublic]

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!

[@TheBuddilla]

My islands will be htmx LOL