Choosing between SSR, SSG, and dynamic rendering in Astro

[@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!

[@egrekov]

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

[@CodinginPublic]

Glad it was a help!

[@ytdevs]

This is the best explanation I’ve seen yet, thanks a ton 🎉 loving those diagrams ❤💪🏾

[@CodinginPublic]

🙌 glad it helped!

[@hiryuimajin]

Your teaching is always amazing!

[@CodinginPublic]

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

[@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!

[@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!

[@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!

[@chrisbrace6915]

OK! Awesome video. Showing both the conceptual layout visually as well as code example reinforcing that concept and showing what changes.

[@CodinginPublic]

Glad you enjoyed it!

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

[@jmonterroso.dev13]

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

[@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!

[@seghirissam2662]

Best channel to learn Astro out there. Thank you for this stunning content!

[@CodinginPublic]

Wow, thank you!

[@joshreynolds4164]

Visuals really helped on this one!

[@CodinginPublic]

So glad it was a help!

[@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!

[@murtadha96]

An absolutely fantastic explanation! Thank you

[@CodinginPublic]

Glad it was helpful!

[@21rogerwaters]

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

[@CodinginPublic]

Thanks, my friend. Glad you enjoyed it!

[@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!

[@sonny5497]

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

[@CodinginPublic]

Glad it was helpful! Thanks for the kind words!

[@MarkDeibert]

Great tutorial and explanation of Astro functionality. Really enjoyed this. Idea for an Astro tutorial: Explain how to set cookies that *do not disappear on redirect*. I spent nearly 2 days trying to make this work. I finally got it late yesterday.

[@MarkDeibert]

The VS Code font and icons links above work, but theme link gives 404 page

[@LeoMiranda]

Fantastic explanation, thanks

[@CodinginPublic]

So glad it was a help!

[@sujit_webdev]

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

[@CodinginPublic]

You're very welcome!

[@diegoulloao]

Amazing explanation. Really clear

[@CodinginPublic]

Glad it was helpful!

[@oussamasethoum1665]

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

[@CodinginPublic]

Glad it was helpful!

[@FumezCreates]

I love Astro. Your explanation is magnificent

[@CodinginPublic]

Thanks for the kind words!

[@rayusaki88]

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

[@CodinginPublic]

So glad it was a help!

[@issa.garcia]

Great content! Love how you explain!

[@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!

[@akosbalint3485]

Very good explanation. Thank you.

[@CodinginPublic]

So glad it was a help!

[@Oggy-WanKenobi]

This is a great resource! Thanks a ton

[@CodinginPublic]

Glad you enjoyed it!

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

[@CodinginPublic]

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!

[@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?

[@AppyDave]

Good video thank you, I'm wondering what diagram tool you are using?

[@CodinginPublic]

Glad you enjoyed it! It’s called tldraw:)

[@AppyDave]

@@CodinginPublic thank you, much appreciated

[@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?

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

[@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?

[@funkologie]

Thanks Chris!

[@CodinginPublic]

You’re welcome!

[@HeyWorld-o8j]

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?

[@HeyWorld-o8j]

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

[@nickwoodward819]

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

[@CodinginPublic]

Haha glad it was helpful!

[@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!

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

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

[@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?

[@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!

[@SalvaToroTorus]

Excellent

[@CodinginPublic]

Glad you found it helpful!

[@nikkehtine]

Nice video

[@CodinginPublic]

Glad you enjoyed it!

[@nickwoodward819]

Honestly, I'm going to keep count of the times I refer to this. I might as well start at '4' given how many times I've been here. You'd think I'd learn...

[@韩北坡]

great

[@CodinginPublic]

🙌

[@TheBuddilla]

My islands will be htmx LOL